React Native使用i18n时如何对useState存储的内容进行翻译？

现有代码的错误点 #

• 未导入useState钩子：React Hook useState没有从react包中导入，直接调用会报错。
• useState初始化错误：初始值外多余包裹了{}，导致text初始值是对象而非字符串，直接渲染会抛出异常。
• 点击后文本未走i18n翻译：硬写了英文的"Thank you "，没有调用i18n.t匹配多语言条目，自然无法实现多语言切换。
• 样式名拼写错误：View组件绑定的样式是styles.conainer，和StyleSheet中定义的container拼写不一致，布局样式会失效。

前置准备 #

你需要先在你的i18n翻译资源里新增thank you对应的多语言条目，示例如下：

"user_detail": {
  "click_me": "你好，点击我",
  "thank_you": "谢谢"
}

其他语言同理配置对应的翻译内容即可。

修正后的完整代码 #

import React, { useState } from 'react'; // 新增导入useState
import { StyleSheet, View, Text, Button } from 'react-native';
import i18n from './../translations/i18n';

function TryBtn(props) {
    // 去掉多余的大括号，直接传入i18n.t返回的字符串作为初始值
    const [text, setText] = useState(i18n.t('user_detail.click_me'));
    return (
        {/* 修正样式名拼写错误 */}
        <View style={styles.container}>
         <Text>{text}</Text>   
         {/* 点击后调用i18n.t获取对应语言的thank you文本 */}
         <Button title="click" onPress={() => setText(i18n.t('user_detail.thank_you'))}/>
        </View>
    );
}

const styles = StyleSheet.create({
  container : {
      flex : 1,
      justifyContent : 'center',
      alignItems : 'center',
  }  
})
export default TryBtn;

修改后即可实现点击按钮切换文本的需求，两段文本都会根据当前i18n生效的语言自动加载对应的翻译内容。

内容的提问来源于stack exchange，提问作者Yellow Clock