React native React Native backgroundImage不与flatlist的元素一起工作

我试图将图片imageBackground作为平面列表的一个元素调用，但出现以下错误消息：

“无效呼叫”

如果我真的喜欢这工作

<FlatList
                          horizontal={true}
                          showsVerticalScrollIndicator={false}
                          showsHorizontalScrollIndicator={false}
                          data={this.state.newDataCards}
                          keyExtractor={(item) => item.id.toString()}
                          renderItem={({item}) => {
                              const image =  './../assets/galaxy.jpg' // HERE ITS OK
                              return (

                                  <TouchableHighlight  onPress={() => alert(item.description)}>
                                     <View style={styles.card_container}>
                                            <ImageBackground source={require(image)} style={styles.card_image} imageStyle={{ borderRadius: 6, resizeMode: 'contain' }} >
                                           </ImageBackground>
                                     </View>
                                   </TouchableHighlight>

                              )
                          }
                      }
                  />

item.id.toString（）}
renderItem={（{item}）=>{
const image='./../assets/galaxy.jpg'//这里没问题
返回(
警报（项目说明）}>
)
}
}
/>

但是，如果我试图用item.url\u img获取“const image”，但这不起作用：

   <FlatList
                          horizontal={true}
                          showsVerticalScrollIndicator={false}
                          showsHorizontalScrollIndicator={false}
                          data={this.state.newDataCards}
                          keyExtractor={(item) => item.id.toString()}
                          renderItem={({item}) => {
                              const image =  item.url_img // HERE ITS NOT OK
                              return (

                                  <TouchableHighlight  onPress={() => alert(item.description)}>
                                     <View style={styles.card_container}>
                                            <ImageBackground source={require(image)} style={styles.card_image} imageStyle={{ borderRadius: 6, resizeMode: 'contain' }} >
                                           </ImageBackground>
                                     </View>
                                   </TouchableHighlight>

                              )
                          }
                      }
                  />

item.id.toString（）}
renderItem={（{item}）=>{
const image=item.url\u img//此处不正常
返回(
警报（项目说明）}>
)
}
}
/>

my item.url\u img return:“../../assets/galaxy.jpg”

如React Native所说

将您的

this.state.newDataCards

更改为

[
  {
    id:1,
    url_img : require('./../assets/galaxy.jpg'),
  },
  {
    id:2,
    url_img : require('./../assets/galaxy.jpg'),
  },
  .
  . and so on
]

而您的

平面列表

也可以

<FlatList
    horizontal={true}
    showsVerticalScrollIndicator={false}
    showsHorizontalScrollIndicator={false}
    data={this.state.newDataCards}
    keyExtractor={(item) => item.id.toString()}
    renderItem={({ item }) => {
      return (
        <TouchableHighlight onPress={() => alert(item.description)}>
          <View style={styles.card_container}>
            <ImageBackground
              source={item.url_img}
              style={styles.card_image}
              imageStyle={{
                borderRadius: 6,
                resizeMode: 'contain',
              }}></ImageBackground>
          </View>
        </TouchableHighlight>
      );
    }}
  />

item.id.toString（）}
renderItem={（{item}）=>{
返回(
警报（项目说明）}>
);
}}
/>

确实如此。在文档中遗漏了这个，谢谢！！

[
  {
    id:1,
    url_img : require('./../assets/galaxy.jpg'),
  },
  {
    id:2,
    url_img : require('./../assets/galaxy.jpg'),
  },
  .
  . and so on
]

<FlatList
    horizontal={true}
    showsVerticalScrollIndicator={false}
    showsHorizontalScrollIndicator={false}
    data={this.state.newDataCards}
    keyExtractor={(item) => item.id.toString()}
    renderItem={({ item }) => {
      return (
        <TouchableHighlight onPress={() => alert(item.description)}>
          <View style={styles.card_container}>
            <ImageBackground
              source={item.url_img}
              style={styles.card_image}
              imageStyle={{
                borderRadius: 6,
                resizeMode: 'contain',
              }}></ImageBackground>
          </View>
        </TouchableHighlight>
      );
    }}
  />