Question

使用平面列表在我的项目中创建项目列表。我的项目在列表中呈现良好。

那里有1个收藏夹图标，用于选择该产品作为收藏夹。根据我的数据，我正在更改该产品是否受喜爱的图标。

我想要的是绑定每个产品以将其标记为收藏并更改颜色。总之需要切换“收藏夹”图标而不是“收藏夹”图标。

我的代码

我正在渲染的数据

 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
                    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>
.....
}

当点击“我的收藏”图标时，如何使我的产品成为最爱。

先谢谢了。

Answer 1

首先，我们需要有一个变量来观看 [extraData]状态数据已更改。（i.e）一些产品已被标记或未标记为收藏。

这有助于名单列表通知值已更改，因此我们必须重新渲染。

对于您而言，在Flatlist中添加 extraData 字段应该很好

href

您甚至可以从状态中获取实际的行数据，并直接更改，这是不必要的。

//tr[@class="tableLight"]//a/@href
//tr[@class="tableLight"]//a//text()

Answer 2

通过rowData方法将onPress作为参数，并在单击项目时更新is_fav的状态。

TickFav = (rowData) => {
    rowData.is_fav = !rowData.is_fav
}

Answer 3

对项目使用onPress，当您单击项目时，通过ID并在该ID的基础上检查该项目并相应地切换其收藏夹。

onPress={() => {his.TickFav(id) }

在FLATLIST中绑定列表项onpress（React Native）

3 个答案: