如何在React-Native中查看导入文件的更改？

debugcn 发表于 Dev

工程学

我有一个.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”包提供各种语言的翻译。因此，如果当前将语言设置为英语，则它将文本显示为“早晨”，如果将其法语显示为“拉丁”，依此类推。如果我在组件内使用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>
        );
})}

工程学

经过一番游戏后，我想出了一个对我有用的解决方案。有点“ 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-Localization包有一个默认对象，它是当前设置的语言。

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

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>
    );
})}

这可能不是最佳解决方案，但可以解决我的问题。也许它将帮助别人。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。