使用 flatlist 在我的项目中创建项目列表。我的项目在列表中呈现良好。
那里有 1 个收藏图标,用于选择产品作为收藏。 根据我的数据,我正在更改底座上的图标,无论该产品是否受欢迎。
我想要的是绑定(bind)每个产品以标记为收藏并更改颜色。 简而言之,需要切换最喜欢和不最喜欢的图标。
My code
Data i am rendering
entries: [
{ id: 1, is_fav: false, title: 'hello', ImagePath: 'https://cdn.pixabay.com/photo/2012/03/01/00/55/flowers-19830_960_720.jpg' },
{ id: 2, is_fav: true, title: 'world', ImagePath: 'https://cdn.pixabay.com/photo/2017/07/01/19/48/background-2462434_960_720.jpg' },
{ id: 3, is_fav: false, title: 'you', ImagePath: 'https://cdn.pixabay.com/photo/2016/12/16/15/25/christmas-1911637_960_720.jpg' },
{ id: 4, is_fav: true, title: 'you', ImagePath: 'https://cdn.pixabay.com/photo/2015/07/10/17/27/sparkler-839831_960_720.jpg' },
{ id: 5, is_fav: false, title: 'hello', ImagePath: 'https://cdn.pixabay.com/photo/2012/03/01/00/55/flowers-19830_960_720.jpg' }]
Flatlist
<FlatList
data={this.state.entries}
numColumns={this.state.columns}
key={this.state.key}
renderItem={this.Render_flatlist_Data}
keyExtractor={(item, index) => index.toString()}
ListHeaderComponent={this.Render_FlatList_Sticky_header}
stickyHeaderIndices={[0]}
/>
Render_flatlist_Data = ({ item: rowData }) => {
.....
<TouchableOpacity onPress={() => this.TickFav()}>
<Text>
<Icon name={(rowData.is_fav === true ? 'heart' : 'ios-heart-empty')}
size={25} color="#ddd" /> </Text>
</TouchableOpacity>
.....
}
如何在点击产品收藏夹图标时使产品成为收藏夹。
提前致谢。
最佳答案
首先,我们需要有一个变量来监视 [extraData] 状态数据已更改。 (即)某些产品已被标记为或未标记为收藏。
这有助于平面列表通知值已更改,因此我们必须重新渲染。
在您的情况下,在 Flatlist 中添加 extraData 字段应该没问题
<FlatList
data={this.state.entries}
extraData={this.state}
numColumns={this.state.columns}
key={this.state.key}
renderItem={this.Render_flatlist_Data}
keyExtractor={(item, index) => index.toString()}
ListHeaderComponent={this.Render_FlatList_Sticky_header}
stickyHeaderIndices={[0]}
/>
TickFav = rowData => {
rowData.is_fav = !rowData.is_fav
this.setState({});
}
您甚至可以从状态中获取实际的行数据并直接更改它,这是不需要的。
TickFav = (index) => {
const {entries} = this.state;
entries[index].is_fav = !entries[index].is_fav;
this.setState({entries});
}
关于react-native - 在 FLATLIST 中绑定(bind)列表项 onpress (React Native),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54512904/