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

Question

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

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

但问题还是更好说当我想从标签Mark导航到不导航和更改标签的帖子时出现bug :(

任何人都可以解决这个问题吗？谢谢！

Answer 1

对于导航，您可以使用所使用按钮的prop的navigate（）函数。例如，如果我们将createBottomTabNavigator定义为，

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

我们将使用按钮的导航功能移动到Settings选项卡，如下所示，

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

Answer 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
            },
        },
    }
);