react - 22 在navigator 中使用国际化 (换个思路:把参数传递给navigator!)

访问量: 193

这可真是个大骨头。 

经过我前面的若干笔记: 

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'}) }} />

订阅/RSS Feed

Subscribe

分类/category