如何在React Native中导航到BottomTabNavigator内部的另一个导航?

时间:2020-01-12 18:09:02

标签: react-native react-navigation

我想从BottomTabNavigator导航到堆栈导航器。但是,当我在BottomTabNavigator中分配堆栈导航器时,会显示The component for route 'route_name' must be a React component错误。

enter image description here

这是我的代码:

const BottomTabNavigator = createAppContainer(createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions:{
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor }) => (  
          <View>  
              <Icon style={[{color: tintColor}]} size={25} name={'ios-home'}/>
          </View>)
        }
    },
    Profile: {
      screen: ProfileStackNavigator,
      navigationOptions:({ navigation }) => ({
        tabBarLabel: 'Profile',
        tabBarIcon: ({ tintColor }) => (  
          <View>  
              <Icon style={[{color: tintColor}]} size={25} name={'ios-contact'}/>
          </View>),
        }),
    },
  },
  {
    tabBarOptions: {
      activeTintColor: '#2383F7',
      // inactiveTintColor: 'gray',
    },
  }
));

const ProfileStackNavigator = createAppContainer(createStackNavigator({
  ProfileHome: 
  {
    screen: ProfileScreen,
    // headerMode: 'none',
    navigationOptions:
    {
      header: null,
    }

  },
  ChangePasswordFromProfile: 
  {
    screen: ChangePasswordScreen,
    // navigationOptions:
    // {
    //   header: null,
    // }
  }
}))

这是导航的所有版本:

“反应导航”:“ ^ 4.0.10”, “ react-navigation-drawer”:“ ^ 2.3.3”, “ react-navigation-stack”:“ ^ 1.10.3”, “ react-navigation-tabs”:“ ^ 2.6.2”

预先感谢

2 个答案:

答案 0 :(得分:1)

在创建BottomTabNavigator时,尚未创建ProfileStackNavigator变量。因此,将您的const ProfileStackNavigator = ...代码移到const BottomTabNavigator = ...

上方

答案 1 :(得分:0)

我相信您应该只有一个createAppContainer?从堆栈导航器中删除createAppContainer并尝试。