Question

我有一个menu.json文件，其中包含数百个项目：

menu_items = [
    {
       name: "Category 1",
       file: "cat1.json"
    },
    {
       name: "Category 2",
       file: "cat2.json"
    },
    {
       name: "Category 3",
       file: "cat3.json"
    },
    {
       name: "Category 4",
       file: "cat4.json"
    },
    {
       name: "Category 5",
       file: "cat15.json"
    }
]

我能够读取menu.json文件。然后，我创建一个显示每个条目的可滚动列表。当用户单击条目时，我想加载另一个屏幕，以导入指定的json文件。

当前，当有人单击列表中的项目时，将加载以下模块：

<DisplayItem file_name={this.state.selected_file} />

然后在我的DisplayItem中，我有以下内容：

const item_data = require('./' + this.props.file_name);

但是，我得到了错误：

Invalid call at line 52: require(file)

显然，当文件名是动态文件时，我无法导入或要求导入。我看到的唯一解决方案是首先手动要求所有这些解决方案。

我发现此解决方案有点挑战，因为后来我得到了冗余数据。每当我更新menu.json文件时，我都必须记住对需要所有json文件的模块进行完全相同的更新。

是否有更有效的方法来消除冗余问题？

Answer 1

据我所知，您不需要动态值响应本机文件，因为它会使编译器在构建应用程序时不知道要包含哪个文件。

如React-Native's Image documentation

所述

要使其正常工作，必须知道require中的图像名称静态地。

例如

// GOOD
<Image source={require('./my-icon.png')} />;


// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;


// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');

<Image source={icon} />;

将动态文件名导入React-Native

1 个答案: