Question

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

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

希望这会有所帮助。

Answer 2

这是无处不在的，因为 navigationOptions 是“静态”方法。只需在屏幕上创建navigationOptions-主页（示例）

//在主屏幕中定义标签选项

 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}/>; 
            }
};

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

2 个答案: