React native React Navigation V3中的动态选项卡栏图标/标签

我有一个选项卡导航器，它嵌套了多个堆栈导航器。我想在堆栈导航器中导航到不同屏幕时动态更改选项卡图标/选项卡名称。我知道这是不可能的开箱即用V3。(). 有没有绕过这个的建议？Tia.

导航V3带来了一些突破性的变化。仅允许直接子项更改父导航器的导航选项。在我的情况下，选项卡导航器导航选项只能由堆栈导航器更改。不是从屏幕上看的

但是，如果要根据管线更改选项卡标签/选项卡图标，可以执行以下操作

const HomeStackNav=createStackNavigator({
主页：{screen:home}，
报告：{屏幕：报告}
});
HomeStackNav.navigationOptions=（{navigation}）=>{
让{routeName}=navigation.state.routes[navigation.state.index]；
让navigationOptions={}；
如果（routeName==='home'）{
navigationOptions.tabBarLabel='Welcome'；
navigationOptions.tabBarIcon=（{focused}）=>；
}否则{
navigationOptions.tabBarLabel='Home'；
navigationOptions.tabBarIcon=（{focused}）=>；
}
返回导航选项；
}
const TabNav=createBottomTabNavigator({
主页选项卡：主页导航
})

---

希望这有帮助。

React Navigation V3附带了一些突破性的更改。仅允许直接子项更改父导航器的导航选项。在我的情况下，选项卡导航器导航选项只能由堆栈导航器更改。不是从屏幕上看的

但是，如果要根据管线更改选项卡标签/选项卡图标，可以执行以下操作

const HomeStackNav=createStackNavigator({
主页：{screen:home}，
报告：{屏幕：报告}
});
HomeStackNav.navigationOptions=（{navigation}）=>{
让{routeName}=navigation.state.routes[navigation.state.index]；
让navigationOptions={}；
如果（routeName==='home'）{
navigationOptions.tabBarLabel='Welcome'；
navigationOptions.tabBarIcon=（{focused}）=>；
}否则{
navigationOptions.tabBarLabel='Home'；
navigationOptions.tabBarIcon=（{focused}）=>；
}
返回导航选项；
}
const TabNav=createBottomTabNavigator({
主页选项卡：主页导航
})

---

希望这能有所帮助。

这在任何地方都是可能的，因为导航选项是“静态”方法。只需在主屏幕中创建导航选项（示例）

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

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

静态导航选项=（{navigation}）=>{
返回{
标题:"家",，
tabBarIcon:（{focused}）=>{
返回；
},
标签：“主页”
};
};

然后从您需要的位置调用此方法，并在其中更改数据

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

Home.navigationOptions={
tabBarIcon:（{focused}）=>{
返回；
}
};

这在任何地方都是可能的，因为导航选项是“静态”方法。只需在主屏幕中创建导航选项（示例）

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

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

静态导航选项=（{navigation}）=>{
返回{
标题:"家",，
tabBarIcon:（{focused}）=>{
返回；
},
标签：“主页”
};
};

然后从您需要的位置调用此方法，并在其中更改数据

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

Home.navigationOptions={
tabBarIcon:（{focused}）=>{
返回；
}
};