【React-Native】动态切换App语言

[famousczm]

问题描述

最近一个新需求，App 设置页面加一个按钮可以实现简繁体动态切换的功能，一键全 App 更新。

解决方法

我们项目实现国际化使用 react-native-languages 组件( react-native-i18n 也是同样效果 )，通过设置 locale 来切换语言，这个很简单，但问题是切换语言后只有重新渲染页面才生效，自动重启 App 体验也不好。怎么能在切换语言后使整个 App 重新渲染呢？可以再 App 的根脚本 App.js 中通过 React-Navigation 传递相关状态并在切换语言的时候改变状态值就可以使路由栈中所有的页面都刷新了，核心代码如下：

...
constructor (props) {
    super(props)
    this.state = {
      refresh: '', // 控制 App 刷新的状态
    }
 }

componentDidMount () {
  global.refresh = () => {
      const { refresh } = this.state
      this.setState({ refresh: !refresh })
    }
}

render () {
  const { refresh } = this.state
  ...
  <AppStack screenProps={{ refresh }} />
 ...
}

通过 screenProps 属性把刷新状态传给所有的子路由，再定义一个可全局调用的刷新方法 global.refresh () 就可以全局刷新了，切换完语言后使用 global.refresh() 就可以了

总结

不管怎样，要想刷新页面还是需要 props 或 state 状态的改变，要想刷新 App 的所有页面那就要在 App 的最顶级节点去控制状态，性质是一样的。另外，如果有需要的重启 App 相关需求的可以尝试这个组件：react-native-restart

[isllyend]

博主你好 亲测该方案 无效 screenProps的值有改变 但页面并无刷新

“reac-native”:“0.61.5”,
"react-navigation": "^4.1.0",