React native 将动态文件名导入React Native

我有一个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} />

但是，我得到了一个错误：

Invalid call at line 52: require(file)

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

我觉得这个解决方案有点挑战性，因为这样我就得到了冗余数据。每当我更新menu.json文件时，我必须记住对需要所有json文件的模块进行完全相同的更新

---

有没有一种更有效的方法可以消除冗余问题？

我知道，您不需要动态值中的react native文件，因为这会使编译器在构建应用程序时不知道要包含哪个文件

如

为了使其工作，必须知道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} />;

//很好
;
//坏的
var icon=this.props.active？““我的图标处于活动状态”：“我的图标处于非活动状态”；
;
//好
var icon=this.props.active？require（'./myicon-active.png'）：require（'./myicon-inactive.png'）；
;

检查这里：

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