react-navigation

安卓端React Navigation的TabNavigator选项卡与react-native-scrollable-tab-view、FlatList一起使用，只显示第一页的内容。

解决方案：给TabNavigator增加lazy: true 属性，官方解释，whether to lazily render tabs as needed as opposed to rendering them upfront

FlatList 初始化时不显示列表，需要拖拽一下才显示当 React Navigation 与 FlatList 配合使用时，会出现初始化时不显示列表的bug，必须要拖拽一下，才会正常显示

解决方案：此时需要给FlatList设置removeClippedSubviews={false} 属性，即可解决问题(目前最新版0.46貌似已经解决了此bug)，官方文档解释如下：

注意：removeClippedSubviews属性目前是不必要的，而且可能会引起问题。如果你在某些场景碰到内容不渲染的情况（比如使用LayoutAnimation时），尝试设置removeClippedSubviews={false}。我们可能会在将来的版本中修改此属性的默认值。

快速点击重复跳转

react-navigation目录下src/addNavigationHelpers.js

export default function<S: *>(navigation: NavigationProp<S, NavigationAction>) {

  // 添加点击判断

  let debounce = true;

  return {

      ...navigation,

      goBack: (key?: ?string): boolean =>

          navigation.dispatch(

              NavigationActions.back({

                  key: key === undefined ? navigation.state.key : key,

              }),

          ),

      navigate: (routeName: string,

                 params?: NavigationParams,

                 action?: NavigationAction,): boolean => {

          if (debounce) {

              debounce = false;

              navigation.dispatch(

                  NavigationActions.navigate({

                      routeName,

                      params,

                      action,

                  }),

              );

              setTimeout(

                  () => {

                      debounce = true;

                  },

              500,

              );

              return true;

          }

          return false;

      },

    /**

     * For updating current route params. For example the nav bar title and

     * buttons are based on the route params.

     * This means `setParams` can be used to update nav bar for example.

     */

    setParams: (params: NavigationParams): boolean =>

      navigation.dispatch(

        NavigationActions.setParams({

          params,

          key: navigation.state.key,

        }),

      ),

  };

}

单页面设置navigationOptions中, 使用this

static navigationOptions = ({navigation, screenProps}) => ({

        headerTitle: '登录',

        headerLeft:(

            <Text  onPress={()=>navigation.state.params.navigatePress()} style={{marginLeft:5, width:30, textAlign:"center"}} >

                <Icon  name='ios-arrow-back'size={24} color='white' />

            </Text>

        )

    });

    _onBackAndroid=()=>{

        alert('点击headerLeft');

    }

    componentDidMount(){

        //在static中使用this方法

        this.props.navigation.setParams({ navigatePress:this._onBackAndroid })

    }

大多数页面都是push(从右往左)，某些页面想从下往上

const TransitionConfiguration = () => ({

    screenInterpolator: (sceneProps) => {

        const { scene } = sceneProps;

        const { route } = scene;

        const params = route.params || {};

        const transition = params.transition || 'forHorizontal';

        return CardStackStyleInterpolator[transition](sceneProps);

    },

});

const Navigator = StackNavigator (

    {

        // Root:{screen: FilterNews},

        Root: {screen: Tab},

        CompanyDetail: {screen: CompanyDetail},

        LawOption: {screen: LawOption},

    },

    {

        transitionConfig: TransitionConfiguration,

        initialRouteName: 'Root',

        navigationOptions: {    //不要在此处设置 否则后面全部被覆盖

            headerStyle: [Style.shadow, {backgroundColor: 'white',borderBottomColor:'white'}],

            headerBackTitle: null,

            headerTintColor: '#192847',// 返回箭头颜色

            showIcon: true,

            swipeEnabled: true,//是否可以滑动返回

            animationEnabled: true,//是否带动画

            gesturesEnabled: true,// 是否支持手势返回

            headerTitleStyle: {fontSize: 18, color: Color.textBlack, alignSelf:'center'},//定义title的样式

            cardStyle: {

                backgroundColor: 'transparent',

            },

        },

        // transitionConfig: (): Object => ({

        //     containerStyle: {

        //         backgroundColor: 'transparent',

        //     },

        // }),

    }

)

// 使用的时候 ，参数加一个 transition: 'forVertical'

this.props.navigation.navigate('Login', {transition: 'forVertical', someValue: 0})

从下往上背景色是黑色

react-navigation/src/views/CardStack/TransitionConfigs.js

里 ModalSlideFromBottomIOS -> backgroundColor 改为 ‘#fff’

android 有键盘的时候会把 tabBar 顶起来（tabBar悬浮在键盘上方）

工程目录->android->app->src->main->AndroidManifest.xml-> <activity android:name=".MainActivity"

android:windowSoftInputMode="adjustResize"

替换为

android:windowSoftInputMode="stateAlwaysHidden|adjustPan"

返回指定页面

tabA 跳转到 tabB (tabNavigator, tabA页面内点击某个按钮跳转到tabB)

android 标题不居中

方案一：

const Stack = StackNavigator(

    {

        Tab: {

            screen: Tab,

            navigationOptions: ({navigator}) => ({

                // drawerLockMode: 'locked-closed',

            })

        },

        First: {screen: First},

    },

    {

        navigationOptions: {

            headerBackTitle: null,

            headerTitleStyle: {fontSize: Common.headrTitleSize, alignSelf: 'center', textAlign: 'center'},//定义title的样式

            headerRight: (

                <View />

            )

        },

    }

)

总处设置，基本 OK

具体页面内设置的navigationOptions 会覆盖上面总处 navigationOptions 的选项

具体页面内 navigationOptions 如果重新设置了 headerTitleStyle，就需要在具体处headerTitleStyle 添加 alignSelf: 'center'

另外方案一在没有返回按钮的页面中标题可能会偏左，解决方案就是类似，在页面设置 headerLeft 为一个空View

headerLeft: (

    <View />

)

方案二：

MyProject/node_modules/react-navigation/src/views/Header/Header.js

Line 392

alignItems: Platform.OS === 'ios' ? 'center' : 'flex-start',

替换为

alignItems: 'center',

Line 196

_renderTitle 方法中注销掉安卓部分的判断，或者把下面整段都注销

if (Platform.OS === 'android') {

      // if (!options.hasLeftComponent) {

      //   style.left = 0;

      // }

      // if (!options.hasRightComponent) {

      //   style.right = 0;

      // }

    }

相对来说方案二更省事，高效，污染少，但是每次 npm install 后都需要重新来一遍

巴特西