React Native （四）复选框

我使用的是

'react-native-check-box'

第三方库。

check-box是一行一行的。我们的需求是，从网络获取数据并显示多行，选择之后点击确定能将点击的产品id获取到

1、数据源的获取与加载

constructor(props) {
        super(props);
        this.state = {
            dataArray: []
        }
    }

和listview一样，在this.state中设置dataArray数组为数据源

this.setState({
            dataArray: data
        })

通过setState来设置网络获取的数组data为json对象数组。

data = JSON.parse(data)//网络获取的的字符串，通过方法转成对象数组

布局

 <ScrollView >
                    {this.renderView()}
                </ScrollView>

renderView() {
        if (!this.state.dataArray || this.state.dataArray.length === 0)return;
        var len = this.state.dataArray.length;
        var views = [];
        for (var i = 0; i < len; i ++) {
            views.push(
                <View key={i}>
                    <View style={styles.item}>
                        {this.renderCheckBox(this.state.dataArray[i])}
                    </View>
                    <View style={styles.line}/>
                    <View style={styles.line}/>
                </View>
            )
        }
        return views;
    }

通过ScrollView进行显示，其中调用了renderview方法。将获取的数据遍历，并加入到views数组中，最后显示这个数组，就能在View中一个一个显示。这里利用了js的数组添加

push和pop方法，这两个方法只会对数组从尾部进行压入或弹出，而且是在原数组进行操作，任何的改动都是会影响到操作的数组。push(args)可以每次压入多个元素，并返回更新后的数组长度

在添加时就调用了CheckBox

renderCheckBox(data) {
        var leftText = data.bname;
        var rightText = data.bstate;
            return (
                <CheckBox
                    style={{flex: 1, padding: 10}}
                    onClick={()=>this.onClick(data)}
                    isChecked={data.ischecked}
                    rightText={"在线，料仓名：" + leftText}
                />);
    }

每一行就返回一个CheckBox。

CheckBox isChecked属性表示是否点击，里面的值是true或者是false

onClick中要改变选择的状态。并从新渲染视图

   onClick(data) {//更改了keys数组中的值
        data.ischecked = !data.ischecked;//改变选中的那个的值
        this.setState({//重新渲染
            dataArray: this.state.dataArray,
        })

    }

yi

点击时，这一个数据的isClicked就改变了。应为data数据源改变了，所以在此setState之后，复选框就会被选上。

当选择玩我们要选的产品后。点击确定按钮，我们就可以遍历this.state.dataArray来获取到哪个数据被点击了，最后将他们选出。

更多操作：转载https://blog.csdn.net/liudao7994/article/details/78264621?locationNum=8&fps=1