Image 对'require'的调用只需要1个字符串文字参数，但发现了以下情况：

我在应用程序中使用了SectionList组件，它从本地json文件解析其内容。列表项具有图像和文本，当使用varibale需要图像时，会导致错误：

调用require时，只需要一个字符串文字参数，但找到了：item.logo

我的json文件

{
    "algorithms":[
       {"title":"Sorting algorithms","logo":"../logos/sorting.png"},
       {"title":"Graph theory","logo":"../logos/graph.png"},
       {"title":"Strings","logo":"../logos/strings.png"},
       {"title":"Greedy technique","logo":"../logos/greedy.png"},
       {"title":"Dynamic programming","logo":"../logos/dp.png"}
    ],
    "datastructures":[
       {"title":"Trees","logo":"../logos/tree.png"},
       {"title":"Lists","logo":"../logos/list.png"},
       {"title":"Tries","logo":"../logos/trie.png"},
       {"title":"Stack and Queue","logo":"../logos/stack.png"},
       {"title":"Hash Tables","logo":"../logos/hashtable.png"}
     ] 
}

和

renderItem

函数

renderItem = ({item}) => {
    return(
        <TouchableWithoutFeedback onPress={()=>this.props.navigation.navigate('List')}>
            <View style={styles.itemHolder}>
                <Image resizeMode="center" style={styles.itemLogo} source={require(item.logo)}/>
                <View style = {styles.itemNameHolder}>
                    <Text style = {styles.itemName}>{item.title}</Text>
                </View>
                <View style={styles.itemPointer}>
                    <Image style={{width:50,height:50,}} source={require('../icons/right-arrow.png')}/>
                </View>
                <Divider/>
            </View>
        </TouchableWithoutFeedback> 
    );
}

renderItem=（{item}）=>{
返回(
this.props.navigation.navigate（'List'）}>
{item.title}
);
}

已编辑

js中的函数

require

不能动态工作。它的参数必须是字符串。

Edit： 我认为您需要使用map的变通方法

首先，您需要找到一种方法使徽标格式如下所示

const data = [
   {"title":"Sorting algorithms","logo": require('../logos/sorting.png')},
   {"title":"Graph theory","logo": require('../logos/graph.png')},
]

那么当你想用它的时候，就这样做

render() {
  return (
    <View>
      {data.map((item) => {
        <View>
          <Image
           style={styles.image}
           source={item.logo}
          />
        </View>
      })}
    </View>
  );
}

render（）{
返回(
{data.map（（项）=>{
})}
);
}

---

让我知道它是否有效

我认为React Native中有一个已知的bug，它与使用FlatList或SectionList动态显示图像有关。我将尝试编辑答案。