我想使用 react-18next 支持本地化。该组件显示一个Picker
,设置一个 LocalStorage 键(所选语言)并更改应用程序语言。我注意到该onValueChange
方法被调用了两次。第一次调用(在 Picker 项目上使用正确的选择点击操作)具有正确的参数(我选择的语言),第二次调用具有第一个 Picker 项目的值,只要值为 (!)。
示例:如果我选择English
Picker 项目,我看到 Picker 切换到英语(第一次_changeLanguage()
调用),然后再次切换到“设备”(第二次_changeLanguage()
调用)。我确定这是一个异步操作问题,不知道在哪里..
@translate(['settings', 'common'], { wait: true })
export default class Settings extends Component {
state = {};
constructor(props) {
super(props);
}
componentWillMount() {
this.getLang();
}
async _changeLanguage(ln) {
const { t, i18n, navigation } = this.props;
console.warn("_changeLanguage: ",ln)
await this.promisedSetState({lang:ln})
if(ln=="device") {
console.warn("removing lang setting")
await AsyncStorage.removeItem('@App:lang');
} else {
console.warn("lang setting: ", ln)
await AsyncStorage.setItem('@App:lang', ln);
i18n.changeLanguage(ln)
}
};
//get Language from AsyncStorage, if it has been previously set
async getLang() {
const value = await AsyncStorage.getItem('@App:lang');
console.warn("getLangfrom asyncstorage:", value)
if(value) await this.promisedSetState ({lang:value})
}
promisedSetState = (newState) => {
return new Promise((resolve) => {
this.setState(newState, () => {
resolve()
});
});
};
render() {
const { t, i18n, navigation } = this.props;
const { navigate } = navigation;
return (<View>
<Picker
selectedValue={this.state.lang}
onValueChange={(itemValue, itemIndex) =>this._changeLanguage(itemValue) }>
<Picker.Item color="#666" label="detected from device" value="device" />
<Picker.Item label="English" value="en" />
<Picker.Item label="Deutsch" value="it" />
</Picker>
</View>);
}
}
该代码基于 react-i18next Expo 示例 https://github.com/i18next/react-i18next/tree/master/example/v9.xx/reactnative-expo