reactnative - 22 在navigator 中使用国际化（换个思路：把参数传递给navigator!）

2019-01-09 15:59

访问量: 1747

这可真是个大骨头。

经过我前面的若干笔记：

1. redux

2. redux-react

3. redux-persist

4. 看一眼thunk

5. async store ()

6. redux 需要传递参数

7. navigator的官方文档

所以才总结出来：

使用i18n的时候，需要考虑若干件事儿：

1. 变量可以改变（参考之前我写的redux）

2. 变量可以保存（参考 redux + react + async）

3. 变量改变后页面自动发生改变（自动再次渲染） ( 参考 redux-persist)

4. 变量改变后， navigator 中的文字也要发生变化。

所以，解决这个问题的根本是：向navigator 的XML 实例传递一个参数，然后在 navigator中调用。参考：https://stackoverflow.com/questions/47026936/passing-screenprops-to-a-tab-navigator

例如：

几点备忘：

1. navigator不要跟redux 混用。参考 https://reactnavigation.org/docs/en/redux-integration.html 原因是：navigation的状态不应该被 redux保存，这个会变得特别复杂。

我也回答了： https://stackoverflow.com/a/54105817/445908 例子都在这里。

2. navigator 中定义是可以使用function的。参考：https://reactnavigation.org/docs/en/headers.html

下面两种写法是一样的，只不过使用function 传递进来的那种写法（第二种）适合使用redux进行刷新

  TradeStackNavigator: {
    screen: TradeStackNavigator,
    // 第一种写法
    navigationOptions: {
      tabBarLabel: "Trade"  // 这种写法，label 就是个固定的值。 这里也可以使用title , 作用是一样的。
    }

    // 第二种写法
    navigationOptions: ({navigation, navigationOptions, screenProps}) => {
      return {
        tabBarLabel: screenProps.tradeTitle,
      }
    }

  },

对于第二种写法，我们在 App.js中这样调用就可以了：（记得这里是两个 {{}}, 不是 {}）

订阅/RSS Feed