React native 如何在react native中定义不同的列表项背景图像？

在我的应用程序中，我希望不同的卡有不同的背景图像，每个图像都有一个数字文本，当我单击图像时，它可以将数字增加一。现在我有相同的图像背景图像，我不知道如何修改我的代码，以满足这一要求。以下是我的代码：

const MyMeetupsList = ({meetups}) => (
    <FlatList
      data={meetups}
      renderItem={({item}) => (
        <View style={{marginLeft:8, marginTop: 8} }>
          <View style={styles.meetupCard}>
            <ImageBackground source={ require('../../../imgs/food-2.jpg')} style={{width: 175, height: 200}} blurRadius={6}>
              <Text style={styles.gridItemText}>{item.title}</Text>
            </ImageBackground>
          </View>
        </View>
      )}
      numColumns={2}
      keyExtractor={item => item.title}
    />
);

constmymeetupslist=（{meetups}）=>(
(
{item.title}
)}
numColumns={2}
keyExtractor={item=>item.title}
/>
);

---

希望你能帮忙！非常感谢

您可以使用属性extraData跟踪对数据集的任何更改，而flatlist将重新提交对数据集应用的任何更改。这里我添加了地图数据集（Immutable.js），它可以用来跟踪多个数据集。如果您只有一个，那么您可以直接放置该数据集。handleClickAction是一个需要定义的函数，用于修改数据

 const MyMeetupsList = ({meetups}) => (
        <FlatList
          data={meetups} 
           extraData={Map({
            foo: meetups, // here you can put any data sets u want to watch for render

           })}
          renderItem={({item}) => (
            <View style={{marginLeft:8, marginTop: 8} }>
              <View style={styles.meetupCard}>
                <ImageBackground source={ require('../../../imgs/food-2.jpg')} style={{width: 175, height: 200}} blurRadius={6} 
           onPress = {()=>handleClickAction(item.id)} >
                      <Text style={styles.gridItemText}>{item.title}</Text>
                    </ImageBackground>
                  </View>
                </View>
              )}
              numColumns={2}
              keyExtractor={item => item.title}
            />
        );

constmymeetupslist=（{meetups}）=>(
(
handleClickAction（item.id）}>
{item.title}
)}
numColumns={2}
keyExtractor={item=>item.title}
/>
);

我希望上面的片段能有所帮助