react-native复选框，当我按下复选框时，如何使用复选框选中或取消选中？

Question

我想知道如何在react-native中检查和取消选中复选框？

我需要使用getInitialState和props吗？或者只需要使用复选框和onPress？

Answer 1

这是一个快速而简单的实现。

import Icon from 'react-native-vector-icons/FontAwesome';

class MyCheckbox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false
        }
    }

    toggle() {
        this.setState({checked: !this.state.checked});
    }

    render() {
        return (
            <TouchableWithoutFeedback onPress={this.toggle.bind(this)}>
                <View>
                    {this.state.checked ?
                         <Icon name="angle-left" size={16} color='#000000' />
                         :
                         null
                    }
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

使用onPress功能更新组件的状态。将其状态设置为checked = true或checked = false。

Answer 2

您可以使用this component或为图片编写自定义复选框。