'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,
        })

    }

點選時，這一個資料的isClicked就改變了。應為data資料來源改變了，所以在此setState之後，複選框就會被選上。

當選擇玩我們要選的產品後。點選確定按鈕，我們就可以遍歷this.state.dataArray來獲取到哪個資料被點選了，最後將他們選出。