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

【问题标题】：createBottomTabNavigator can't change tab from route 3 to route 2createBottomTabNavigator 无法将选项卡从路线 3 更改为路线 2
【发布时间】：2019-07-13 12:52:50
【问题描述】：

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

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

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

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

【问题讨论】：

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

标签： react-native react-navigation tabnavigator

【解决方案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
            },
        },
    }
);

【讨论】：

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