javascript - 在 React Native 中根据状态更新 tabBarLabel

Question

我有一个带有 Navigator 的 React Native 应用程序。我还有一些屏幕和一个标题(所有屏幕通用)。

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

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

我试过简单地写:

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

但这没有用。

作为一棵树，您可以将 App 视为我的应用程序的根，它通过以下方式将 state.language 传递给 Navigator:

<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 版本是什么？

您可以通过 Navigator 的 screenProps 传递翻译。

<Navigator screenProps={{
  myStack1: i18n._('stack1TabBarLabel'),
  myStack2: i18n._('stack2TabBarLabel')
}}/>

并修改 createBottomTabNavigator 创建组件的方式。

export default createBottomTabNavigator({
    myStack1: {
      screen: MyStack1,
      navigationOptions: ({ screenProps }) => ({
        tabBarLabel: screenProps && screenProps.myStack1
      })
    },
    myStack2: {
      screen: MyStack2,
      navigationOptions: ({ screenProps }) => ({
        tabBarLabel: screenProps && screenProps.myStack2
      })
    }
  },
  {
    initialRouteName: 'myStack1',
    tabBarOptions: {
        showLabel: true
    }
  }
);