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

如果show设置为false，则按下Select按钮后会将其更改为true并显示复选框。但是，尽管演出状态发生了变化，但没有任何反应

如果show设置为true，则会出现复选框，但Select不会使它们消失。

我怎样才能让它发挥作用？

Answer 1

我建议做类似于我所做的事情here

创建自己的Checkbox组件

ConcurrentHashMap

然后在你的renderRow中你可以添加你的复选框组件

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

您只需要修复未选中的逻辑，您可以在复选框组件中执行此操作。

Answer 2

您可以通过react-native own复选框元素来实现它。首先将react-native-element添加到您的项目中。

import {CheckBox} from 'react-native-elements';

然后在你的项目中添加它。

<CheckBox
  center
  title='Click Here to Remove This Item'
  iconRight
  iconType='material'
  checkedIcon='clear'
  uncheckedIcon='add'
  checkedColor='red'
  checked={this.state.checked}
/>

然后简单地使用它

- (void)viewDidLoad {
    [super viewDidLoad];

    [self testGCD];
}

- (void)testGCD {
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        NSLog(@"1");
        return;
    });
    NSLog(@"2");
}

因此，如果选中框，则显示勾号，否则显示取消标记。更多访问此链接。

https://react-native-training.github.io/react-native-elements/docs/checkbox.html

如何在本地反应照片中实现所选复选框？

2 个答案: