Question

我有一个带导航器的React Native应用。我也有几个屏幕和标题（在所有屏幕中都一样）。

标题中有一个按钮，用于切换应用程序的语言。将语言传递给导航器的道具后，我可以在屏幕上访问它并翻译周围的东西。

我唯一不能更改的是每个屏幕tabBarLabel中的navigationOptions属性。

我试图简单地写：

MyStack1.navigationOptions = {
    tabBarLabel: myGlobalTranslationFunction('MyOriginalLabel1', this.props.screenProps.language)
};

但这没用。

作为一棵树，您可以认为App是我的应用程序的根目录，其中有一个state.language通过以下方式传递给导航器：

<Navigator screenProps={ {language: this.state.language} }/>

在我的Navigator.js文件中，例如：

const MyStack1 = createStackNavigator({
    MyScreen1: MyScreenComponent1,
    MyScreen2: MyScreenComponent2,
    MyScreen3: MyScreenComponent3,
});

MyStack1.navigationOptions = {
    tabBarLabel: 'MyLabel1'
};

export default createBottomTabNavigator({
        MyStack1,
        MyStack2
    },
    {
        initialRouteName: 'MyStack1',
        tabBarOptions: {
            showLabel: true
        }
    }
);

我认为这个问题在于定义标签依赖于语言道具，但我不知道该怎么做。我考虑过要为Navigator编写一个扩展React.Component的实际类，但是我不确定执行此操作的人如何，因为上面的代码基本上是我遵循文档获得的代码。

Answer 1

您使用的react-navigation是什么版本？

您可以通过screenProps的{{1}}传递译文。

Navigator

并修改<Navigator screenProps={{ myStack1: i18n._('stack1TabBarLabel'), myStack2: i18n._('stack2TabBarLabel') }}/>创建组件的方式。

createBottomTabNavigator

根据React Native中的状态更新tabBarLabel

1 个答案: