javascript - React-Native 如何查看导入文件的变化？

Question

我有一个 .js 文件，其中存储了几个 json 对象，这些对象将用于在应用程序的各个部分动态创建组件。例如:

import langUtil from '../utilities/langUtil';
export default {
 ...
    DEFAULT_DAY_TIME: {
        "times": [
            {
                "name":langUtil.day_morning,
                "value":"1"
            },
            {
                "name":langUtil.day_afternoon,
                "value":"2"
            },
            {
                "name":langUtil.day_evening,
                "value":"3"
            }
        ],
    ...
}

langUtil 使用“react-native-localization”包提供各种语言的翻译。因此，如果当前语言设置为英语，它将显示文本为“Morning”，如果是法语，则显示为“Matin”等。如果我在组件内使用 langUtil.day_morning，这实际上没有问题:

<Text>{langUtil.day_morning}</Text> //will show the correct language when language is changed

因为我的应用程序有一个更改语言的选项，我希望它能将所有文本更新为新语言，并且如前所述，这适用于在组件内部使用 langUtil 的情况。

但是，如果我在渲染中这样做:

render() {
    const { DEFAULT_DAY_TIME} = json_constants;

json_constants 是这样导入的:

import json_constants from '../../assets/json_constants';

当语言改变时，它不会更新。我假设它是因为它已经被导入并且已经设置了语言。所以它不会重新导入文件。我想知道是否有办法更改这些对象的语言，或者我是否需要重新考虑整个设置？

顺便说一下，这里有一个如何使用这些对象的简化示例:

{DEFAULT_DAY_TIME.map(item => {
        return (
                <View key={item.value} style={styles.label} >
                        <Text>{item.name}</Text>
                </View>
        );
})}

Answer 1

经过一番尝试，我想出了一个适合我的解决方案。这有点“hacky”，但现在它完成了工作。所以首先，我将所有 LangUtil 组件引用都转换为字符串。

export const DEFAULT_DAY_TIME = {
    "times": [
        {
            "name":"langUtil.default.day_morning",
            "value":"1"
        },
        {
            "name":"langUtil.default.day_afternoon",
            "value":"2"
        },
        {
            "name":"langUtil.default.day_evening",
            "value":"3"
        }
    ],
...

我必须添加 default 因为我需要使用 require() 而不是 import 来完成这项工作，而 React-Native -本地化包有一个默认对象，即当前设置的语言。

最后，在我需要常量的文件中:

let LangUtil = require('../utilities/langUtil') //you can do this above your class declaration
import {DEFAULT_DAY_TIME} from '../../assets/json_constants';

如果您想使用常量并以正确的语言查看文本，请使用 eval():

{DEFAULT_DAY_TIME.map(item => {
    return (
            <View key={item.value} style={styles.label} >
                    <Text>{eval(item.name)}</Text>
            </View>
    );
})}

这可能不是最好的解决方案，但它对我有用。也许它会对其他人有所帮助。