javascript - 如何在 上呈现复选框(React Native)

Question

我想在图片上添加复选框。这是当前屏幕。

很简单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 属性添加到您的 Flatlist。