如何在<img/>上呈现复选框（React Native）

Question

我想在图像上放置复选框。这是当前的屏幕。

这很简单FlatList。这是FlatList的renderItem()

   <TouchableWithoutFeedback
      onPress={() => this._handleImagePress(item.id)}>
      <Image
        key={item.id}
        source={{uri: item.outfit_img}}
        style={styles.rowImage}
        resizeMode="cover"
      />
    </TouchableWithoutFeedback>

我想要实现的内容如下面的这个屏幕

我有<CheckBox on={true}>个组件来呈现已选中复选框。

请求

handleImagePress = (id) => {
    if(_.includes(this.state.selectedIds, id)) {
        let newSelectedIds = _.filter(this.state.selectedIds, (curObject) => {
            return curObject !== id;
        });
        this.setState({selectedIds : newSelectedIds});
      } else {
        let newSelectedIds = [...this.state.selectedIds, id];
        this.setState({selectedIds : newSelectedIds});
      }
}

Answer 1

您只需在renderItem()：

中执行此操作

renderItem({item}) => {
 const isSelected = this.state.selectedIds.includes(item.id)
 return (
    <TouchableWithoutFeedback
      onPress={() => this._handleImagePress(item.id)}
    >
       <Image
         key={item.id}
         source={{uri: item.outfit_img}}
         style={styles.rowImage}
         resizeMode="cover"
       />
       { isSelected && <CheckBox on={true}> }
    </TouchableWithoutFeedback>
 )
}

此处Checkbox应定位absolute，您可以提供所需的样式。此外，您需要将extraData道具值this.state.selectedphotos添加到您的Flatlist中。