Back

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

发布时间: 2019-01-09 07:59:00

这可真是个大骨头。 

经过我前面的若干笔记： 

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中这样调用就可以了： （记得这里是两个 {{}}, 不是 {}）

<BottomTabNav screenProps={{ tradeTitle: i18n.t('trade', {locale: 'zh'}) }} />

Back