时间戳

首页 > 解决方案 > createBottomTabNavigator 转换配置

react-native - createBottomTabNavigator 转换配置

问题描述

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

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

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

标签： react-nativereact-navigation

解决方案

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})

推荐阅读