【问题标题】:How can i navigate to another navigation inside BottomTabNavigator in react native?如何在本机反应中导航到 BottomTabNavigator 内的另一个导航?
【发布时间】:2020-04-29 13:57:04
【问题描述】:

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

这是我的代码:

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", “反应导航抽屉”:“^2.3.3”, “反应导航堆栈”:“^1.10.3”, “反应导航标签”:“^2.6.2”

提前致谢

【问题讨论】:

  • ProfileStackNavigator 中删除createAppContainer,只保留createStackNavigator
  • 出现同样的错误

标签: react-native react-navigation


【解决方案1】:

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

【讨论】:

    【解决方案2】:

    在您创建 BottomTabNavigator 时,尚未创建 ProfileStackNavigator 变量。所以,把你的const ProfileStackNavigator = ...代码移到const BottomTabNavigator = ...上面

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-07-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多