Reactjs 如何将不同的图像作为背景上传到平面列表内的卡片视图

你好！我正在使用API调用获取项目详细信息。从API中，我将只获得项目ID、项目名称、项目描述。我希望为卡片中的平面列表视图提供不同的图像作为背景。到目前为止，我从API中获得了10项。我的项目文件夹里有这十张图片。其中我以数组格式存储并导入到我的主组件中。但是我不能得到不同的图像作为背景。任何人都可以帮助我实现这一目标。提前谢谢

//Code to get the images

renderImage = ({ item }) => (
    <View>
      <ImageBackground source={CardImages[item]} />
    </View>
  );


//Main Component: 

<FlatList
                numColumns={numColumns}
                data={data}
                renderItem={({ item, index }) => 
                  return (
                    <Card
                      onPress={() =>
                        this.props.navigation.push("ItemDet", {
                          data: item,
                        })
                      }
                      style={{
                        margin: 8,
                        borderRadius: 16,
                        width: config.deviceWidth * 0.43,
                        height: config.deviceWidth * 0.54,
                        overflow: "hidden",
                        justifyContent: "space-evenly",
                        marginLeft: 14,
                      }}
                    >
                      <ImageBackground
                        style={{
                          height: config.deviceWidth * 0.54,
                          width: config.deviceWidth * 0.43,
                          resizeMode: "cover",
                        }}
                      renderImage={this.renderImage}//here is the call for dynamic image background
                      >
                      </ImageBackground>
                      </Card>
                      />

//获取图像的代码
renderImage=（{item}）=>(
);
//主要组成部分：
返回(
this.props.navigation.push（“ItemDet”{
数据：项目：，
})
}
风格={{
差额：8，
边界半径：16，
宽度：config.deviceWidth*0.43，
高度：config.deviceWidth*0.54，
溢出：“隐藏”，
辩护内容：“空间均匀”，
marginLeft:14，
}}
>
/>

你的代码很奇怪，所以我决定用我的方式修复它的语法，希望你能在这里找到一些有用的东西

const CardImages = {
    firstImage: require('./your-first-image.png'),
    secondImage: require('./your-second-image.png'),
    thirdImage: require('./your-third-image.png'),
  };

  return (
    <FlatList
      numColumns={numColumns}
      data={data}
      renderItem={({ item, index }) => {
        return (
          <Card
            onPress={() =>
              this.props.navigation.push('ItemDet', {
                data: item,
              })
            }
            style={{
              margin: 8,
              borderRadius: 16,
              width: config.deviceWidth * 0.43,
              height: config.deviceWidth * 0.54,
              overflow: 'hidden',
              justifyContent: 'space-evenly',
              marginLeft: 14,
            }}>
            <ImageBackground
              style={{
                height: config.deviceWidth * 0.54,
                width: config.deviceWidth * 0.43,
                resizeMode: 'cover',
              }}
              source={CardImages[item]}
            />
          </Card>
        );
      }}
    />
  );

const CardImages={
firstImage:require（'./您的第一个image.png'），
secondImage:require（'./your second image.png'），
thirdImage:require（'./your third image.png'），
};
返回(
{
返回(
this.props.navigation.push（'ItemDet'{
数据：项目：，
})
}
风格={{
差额：8，
边界半径：16，
宽度：config.deviceWidth*0.43，
高度：config.deviceWidth*0.54，
溢出：“隐藏”，
为内容辩护：“间隔均匀”，
marginLeft:14，
}}>
);
}}
/>
);

ImageBackground为什么在另一个

ImageBackground

中有一个

ImageBackground

我最初尝试不使用ImageBackground，但没有成功，然后再次尝试这样做。在一张卡中，我需要提供一个ImageBackground。