Question

尝试在博览会上使用Typescript React设置应用程序，该应用程序可以根据用户选择显示不同的语言，但似乎不起作用。我已经将其存储在asyncStorage中，并调用了await AsyncStorage.getItem('language')以获取该语言，下面是我的代码。如果console.log在asyncStorage上运行，则可以检索到该值。

有趣的是，当我使用Localization.locale时，语言可以正常工作，所以想知道它是否asyncStorage花费的时间太长了？

import I18n from 'i18n-js'
import AsyncStorage from '@react-native-community/async-storage'

import en from './en.json'
import zh from './zh.json'

I18n.translations = {
  en,
  zh
}

async function getLanguage() {
  try {
    const value = await AsyncStorage.getItem('language')
    if (value != null) {
      I18n.locale = value.slice(0,2)
      I18n.fallbacks = true
    }
  } catch(e) {
    console.log(e)
  }
}

getLanguage()

export function t(name: string) {
  return I18n.t(name)
}

语言选择器（将所选语言存储在asyncStorage中）

import AsyncStorage from '@react-native-community/async-storage'
import { Updates } from 'expo';


export default function LanguageChange() {

const onPress = async (language: string) => {
    await AsyncStorage.setItem('language', language);
    Updates.reload();
}


 return (
    <View style={styles.languageContainer}>
          <TouchableOpacity onPress={() => onPress("en")}>
              <Text>English</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => onPress('zh-CN')}>
              <Text>Chinese</Text>
          </TouchableOpacity>
    </View>
  );
}

编辑1

我也尝试过使用.then来查看是否有不同的结果，但结果仍然相同。

AsyncStorage.getItem('language').then((result) => {
  I18n.locale = result.slice(0,2)
})

在Expo上将ActiveStorage与i18n一起使用不起作用

0 个答案: