Как реализовать выбранный флажок на фотографии в реале native?

Question

Я работаю над адаптивным родным приложением, которое будет иметь ListView, состоящий из изображений, отображаемых в строках.

Существует кнопка выбора, которая после нажатия на флажке должна отображаться над изображениями, позволяя пользователю выбрать любую картинку, которую они хотят. Если кнопка выбора снова нажата, это должно привести к исчезновению флажков.

Это должно выглядеть примерно так, когда нажата кнопка выбора:

Затем должен выглядеть следующим образом, когда кнопка выбора не нажата:

Вот код До сих пор:

var select; 

class ImageList extends Component { 
constructor(props){ 
super(props); 
this.state = { 
    show: false, 
}; 
} 

componentWillMount(){ 
const ds = new ListView.DataSource({ 
    rowHasChanged: (r1, r2) => r1 !== r2 
}); 
this.dataSource = ds.cloneWithRows(this.props.images); 
} 

onClick(){ 
this.setState({ 
    show: !this.state.show 
}) 
} 

renderRow(rowData){ 
const {uri} = rowData; 

select = this.state.show ? 
    (<CheckBox 
    onClick={()=>this.onClick()}/>) : (<View />); 

return(
    <View style={{padding: 1, alignSelf: 'flex-start'}}> 
    <TouchableHighlight 
    onPress={this.onClick.bind(this)} 
    > 
    <Image style={styles.imageSize} source={{uri: uri}}> 

     <View style={{position: 'absolute', backgroundColor: 'transparent'}}> 
     {select} 
     </View> 

    </Image> 
    </TouchableHighlight> 

</View> 
    <Image style={styles.imageSize} source={{uri: uri}} /> 
) 
} 

    render() { 
    return (
     <View> 
     <ListView 
      contentContainerStyle={styles.list} 
      dataSource={this.dataSource} 
      renderRow={this.renderRow.bind(this)} 
     /> 

     <TouchableHighlight onPress={this.onClick.bind(this)}> 
      <Text>Select</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
} 

Если для показа установлено значение false, n, как только кнопка «Выбор» будет нажата, она изменит ее на «истина», и должны появиться флажки. Но ничего не происходит, хотя состояние шоу меняется.

Если для показа установлено значение «Истина», то флажки появляются, но Select не приводит к их исчезновению.

Как я могу заставить это работать?

Answer 1

я предлагаю делать что-то подобное, как то, что я сделал here

Создайте свой собственный компонент Checkbox

class MyCheckBoxComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     hide:false 
    } 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     {this.renderMyCheckBoxComponent()} 
     </View> 
    ); 
    } 

    renderMyCheckBoxComponent(){ 
    if(!this.state.hide){ 
     return (
     <View> 
      <CheckBox onClick={()=>this.hide.bind(this)>Button</CheckBox> 
     </View> 
    ); 
    } 
    } 

    hide(){ 
    this.setState({ 
     hide:true 
    }); 
    } 
} 

, а затем в вашем renderRow вы можете просто добавить свой флажок компонент

renderRow(rowData){ 
const {uri} = rowData; 
return(
    <View style={{padding: 1, alignSelf: 'flex-start'}}> 
     <Image style={styles.imageSize} source={{uri: uri}}> 

     <View style={{position: 'absolute', backgroundColor: 'transparent'}}> 
      <MyCheckBoxComponent/> 
     </View> 

     </Image> 
    </View> 
) 
} 

Вам просто нужно исправить логику, если она не установлена, вы можете сделать это в своем элементе checkbox.