2

我正在学习本机反应，我正在尝试使用复选框。我们从 react native 导入的普通复选框。即从 react-native 导入 {checkbox} 对我有用。但是当我尝试使用 react-native-elements 中的复选框时，它不起作用。它仅设置未选中图标的默认值，并且不会更改。

<View style = {styles.containerForCheckBoxValues}>
  <CheckBox
    style={styles.checkBox}
    checkedIcon={<Image source={require('/root/VS_Code/JavascriptProjects/assets/Images/Checkboxactive/Checkboxactive.png')} />}
    uncheckedIcon={<Image source={require('/root/VS_Code/JavascriptProjects/assets/Images/Checkboxdefault/Checkboxdefault.png')} />}
    value={this.state.checkedForKids}
    onChange={() => this.onChangeCheckForKids()} />
  <Text style={styles.textViewStyleKidsStatusLabel}>Have Kids</Text>
</View>;
4

1 回答 1

2

在 react-native-elements 上，您有一个checked必须更改的道具，true或者false这就是定义它是否被检查的原因。要改变你可以调用一个函数onPress。

    <CheckBox
  style={styles.checkBox}
  checkedIcon={<Image source={require('/root/VS_Code/JavascriptProjects/assets/Images/Checkboxactive/Checkboxactive.png')} />}
  uncheckedIcon={<Image source={require('/root/VS_Code/JavascriptProjects/assets/Images/Checkboxdefault/Checkboxdefault.png')} />}
  checked={this.state.checkedForKids}
  title='Your title'
  onPress={() => this.onChangeCheckForKids()}

我使用多个复选框的方式是使用数组。如果您知道要拥有多少个复选框，这很容易，对于每个复选框，只需“属性”一个数字，例如复选框 1 将位于数组中的位置 0。
如果你不知道你有多少，我会为你的对象设置一个额外的键。看起来像这样：

let x = [{
        title: 'this is your title',
        id: 1,
        checked:true,
    }{
        title: 'this is your second title',
        id: 2,
        checked:false,
    }];

完整的简单工作示例：

<CheckBox
title={'click here'}
checked={this.state.delivery}
onPress={() => this.setState({ delivery: !this.state.delivery })}/>
于 2019-02-28T11:10:19.457 回答