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 后都需要重新来一遍