如何在 <Image> 上渲染复选框（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定位，你可以提供你想要的样式。此外，您需要将值为 this.state.selectedphotos 的 extraData 属性添加到您的平面列表中。