将收藏夹图标呈现到平面列表答案

【问题标题】：Rendering Favourites icon to Flat list将收藏夹图标呈现到平面列表
【发布时间】：2021-01-23 05:59:04
【问题描述】：

有什么想法可以在 React Native 的 Flatlists 上呈现 favourites 按钮的心形？我在这里工作正常，我从 REST api 正确获取数据而无需担心，但主要挑战是，必须有收藏夹按钮。

平面列表代码如下所示

  render() {
        return (
            <View style={styles.MainContainer}>
            <FlatList
            data={ this.state.dataSource }
            ItemSeparatorComponent = {this.FlatListItemSeparator}
            renderItem={({item}) => 
                <View style={{flex:1, flexDirection: 'row'}}>
                    <Image source = {{ uri: item.url_image}} style={styles.imageView} />
                    <Text onPress={this.GetItem.bind(this, item.movie_description)} style={styles.textView} >{item.movie_description}</Text>
                </View>
                }
            keyExtractor={(item, index) => index.toString()}
            />
            </View>
        );
  }
}

非常感谢您的帮助！

【问题讨论】：

标签： react-native icons

【解决方案1】：

在 renderItem 的主视图中

<View style={{flex:1, flexDirection: 'row'}}>
     <Image source = {{ uri: item.url_image}} style={styles.imageView} />
     <Text onPress={this.GetItem.bind(this, item.movie_description)} style={styles.textView} >{item.movie_description}</Text>
</View>

你可以简单地添加 png 图像或任何喜欢的图标，但你必须给它位置：'absolute' 如果你想让喜欢的图标浮动在卡片上，你可以像这样将图像添加到 renderItem 的主视图中

<Image 
   source={your png or jpg file's path} 
   style={{
       height: 25, 
       width: 25, 
       position: 'absolute',
       top: 15,
       right: 15
   }}/>

【讨论】：