React Navigation V3 中的动态标签栏图标/标签答案

【问题标题】：Dynamic tab bar icon/label in React Navigation V3React Navigation V3 中的动态标签栏图标/标签
【发布时间】：2018-12-06 16:47:25
【问题描述】：

我有一个标签导航器，其中嵌套了多个堆栈导航器。当我导航到堆栈导航器中的不同屏幕时，我想动态更改选项卡图标/选项卡名称。我知道这在 V3 中是不可能的。 (https://reactnavigation.org/docs/en/navigation-options-resolution.html)。有什么建议可以绕过这个吗？蒂亚。

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

React Navigation V3 带来了一些重大变化。仅允许直接子级更改父导航器的导航选项。在我的情况下，选项卡导航器导航选项只能由堆栈导航器更改。不是来自它的屏幕。 Refer this link

但是，如果您想根据路线更改标签标签/标签图标，您可以执行以下操作。

const HomeStackNav = createStackNavigator({
  home: { screen: Home },
  Report: { screen: Report }
});

HomeStackNav.navigationOptions = ({ navigation }) => {
  let { routeName } = navigation.state.routes[navigation.state.index];
  let navigationOptions = {};
  if (routeName === 'home') {
    navigationOptions.tabBarLabel = 'Welcome';
    navigationOptions.tabBarIcon = ({ focused }) => <WelcomeIcon focused />;
  } else {
    navigationOptions.tabBarLabel = 'Home';
    navigationOptions.tabBarIcon = ({ focused }) => <HomeIcon focused />;
  }
  return navigationOptions;
}

const TabNav = createBottomTabNavigator({
  HomeTab: HomeStackNav
})

希望这会有所帮助。

【讨论】：

【解决方案2】：

到处都有可能，因为 navigationOptions 它是“静态”方法。只需在屏幕中创建 navigationOptions - Home（示例）

// 在主屏幕中定义选项卡选项

 static navigationOptions = ({ navigation }) => {
      return {
        title: 'Home',
        tabBarIcon: ({ focused }) => {
          return <IconComponent name={'Home'} focused={focused}/>; 
        },
        tabBarLabel: "Home"
      };
    };

然后从你需要的地方调用这个方法并改变里面的数据

Home.navigationOptions = {
        tabBarIcon: ({ focused }) => {
           return <AnotherIconComponent name={'LogOut'} focused={focused}/>; 
            }
};

【讨论】：