createBottomTabNavigator 无法将选项卡从路线 3 更改为路线 2

Posted 2023-02-23

【中文标题】createBottomTabNavigator 无法将选项卡从路线 3 更改为路线 2

【英文标题】：createBottomTabNavigator can't change tab from route 3 to route 2

【发布时间】：2019-07-13 12:52:50

【问题描述】：

我在反应导航 v3 中使用 createBottomTabNavigator，我有 3 条这样的路线：

const Route = createBottomTabNavigator(
  
    Home: 
      screen: HomeRoute
    
    Post: 
      screen: PostRoute
    ,
    Mark: 
      screen: MarkRoute
    ,
  
)

但是当我想从标签标记导航到不导航和更改标签的帖子时，问题或更好地说是错误：(

任何机构都可以解决这个问题？谢谢！

【问题讨论】：

您应该向我们展示您在标签之间导航的代码。从这里，我们只能告诉您通常应该做什么来导航。我们无法帮助您解决代码中的错误。

【参考方案1】：

对于导航，您使用您正在使用的按钮的道具的 navigate() 函数。例如， 如果我们将 createBottomTabNavigator 定义为，

export default createBottomTabNavigator(
  
    Home: HomeScreen,
    Settings: SettingsScreen,
  
);

我们将使用按钮的导航功能移至设置标签，如下所示，

class HomeScreen extends React.Component 
  render() 
    return (
      <View style= flex: 1, justifyContent: 'center', alignItems: 'center' >
        <Text>Home!</Text>
        <Button
          title="Go to Settings"
          onPress=() => this.props.navigation.navigate('Settings')
        />
      </View>
    );
  

这里有更详细的例子，TAB-BASED-NAVIGATION

【参考方案2】：

这样定义你的路线

const Route = createBottomTabNavigator(
    
        Home: HomeRoute,
            Post: PostRoute,
            Mark: MarkRoute,
    ,
    
        defaultNavigationOptions: ( navigation ) => (
            tabBarIcon: ( focused, horizontal, tintColor ) => 
                const  routeName  = navigation.state;
                return <View/>
            ,
        ),
        tabBarOptions: 
            activeTintColor: 'red',
            inactiveTintColor: 'gray'
            style: 
                backgroundColor: 'black'
            ,
            labelStyle: 
                fontSize: 12
            ,
        ,
    
);

【讨论】：

我已经编辑了我的答案并为标题和标签图标添加了选项，标签由反应导航自动显示。希望这会有所帮助