createBottomTabNavigator transitionConfig

Question

我正在通过克隆 Instagram 来学习 react-native。

有什么方法可以将 transitionConfig 应用于 createBottomTabNavigator(react-navigation)？我知道document 中没有 transitionConfig 。但我想像 Instagram 上传一样向上滑动页面

const Footer = createBottomTabNavigator(
  {
    Home: { screen: Home },
    Upload: { screen: Upload  },
  },
  {
    initialRouteName: 'Home',
    transitionConfig: TransitionConfiguration,
  }
);

Answer 1

createBottomTabNavigator 没有 transitionConfig。要在单击导航栏时启用转换，我做了以下解决方法。

首先将 Upload 屏幕放入 StackNavigator，并将 tabBarOnPress 设置如下：

const UploadStack = createStackNavigator({
        Upload: Upload
});

UploadStack.navigationOptions = {
    tabBarOnPress: ({navigation, defaultHandler}) => { navigation.navigate('ModalUpload') }
}

然后把这个栈放到BottomTabNavigator

const Footer = createBottomTabNavigator({ 
    Home: Home,
    UploadStack: UploadStack
});

最后将 BottomTabNavigator 和 Upload 屏幕放入带有 transitionConfig 的 StackNavigator 中：

export default createStackNavigator({
    Footer: Footer,
    ModalUpload: Upload

}, {headerMode: 'none', transitionConfig: TransitionConfiguration})