<Image> (React Native)에서 체크 박스를 렌더링하는 방법

Question

이미지에 체크 박스를 넣으 려합니다. 여기 현재 화면이 있습니다.

그것은 FlatList 간단합니다. 여기 FlatList

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

에 대한 renderItem()입니다 제가 구현하려는 것은 내가 이 확인란을 선택 렌더링 <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()에서이 작업을 수행 할 필요가 : 여기 Checkbox

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

는 absolute 위치가 있어야합니다, 당신은 원하는 스타일을 제공 할 수 있습니다. 또한 this.state.selectedphotos 값의 extraData 지주를 Flatlist에 추가해야합니다.