Question

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

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

希望你能帮忙！非常感谢！

Answer 1

您可以使用属性extraData跟踪对数据集的任何更改，并且对于应用于数据集的任何更改，flatlist将重新呈现。这里我添加了Map数据集（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}
            />
        );

我希望上面的代码段帮助

如何在本机中定义不同的列表项背景图像？

1 个答案: