1.CarItemState 3個函數(shù)(1)全選/反選 (2)勾選1個 (3)獲取選中的數(shù)組id
2.CartItem 左邊選擇按鈕+右邊顯示一個文字
3.CartItem里面的圖片要自己替換一下
4.可以設(shè)置默認(rèn)值
5.只能選中其中一個
6.不會渲染重復(fù)render

多選.gif

import {observable, useStrict, action, computed} from 'mobx';
// useStrict(true);//這里用到了嚴(yán)格模式厅贪，在修改類的成員屬性的時候函數(shù)前面需要加上 @action

export default class CarItemState {
    // 數(shù)據(jù)源
    @observable list = [];
    // 是否全選
    @observable checkedAll = false;//默認(rèn)不全選


    @action initData(responseData) {
        this.list = responseData
    };


    //獲取選中狀態(tài)
    getSelectArray(){
        let newArray = []
        for (let i = 0; i < this.list.length; i++) {
            let dict = this.list[i]

            if(dict.checked == true){
                newArray.push(dict.id);//請求參數(shù)
            }
        }

        return newArray;
    }

    // 勾選
    @action onChecked = (id) => {
        this.list.forEach(item => {
            if (item.id === id) {

                for (let i = 0; i < this.list.length; i++) {
                    let dict = this.list[i]
                    dict.checked = false;//可以根據(jù)服務(wù)器狀態(tài)進(jìn)行選中
                }

                item.checked ? this.checkedAll = false : null;
                item.checked = !item.checked;
            }
        });

    }


}

import React, {Component} from 'react';
import {observer} from 'mobx-react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';

// 注意: 這里子組件必須監(jiān)聽
@observer
export default class CartItem extends Component {

    render() {
        const {data,store} = this.props;
        const checkIcon = data.checked ? require('./../images/common/chexkbox2.png') : require('./../images/common/chexkbox1.png')
        return (
            <View style={styles.rowContainer}>
                {this.renderLeftImage(data, store, checkIcon)}
                <Text>{data.id}</Text>
            </View>
        );
    }


    //左邊圖片選擇
    renderLeftImage(data, store, checkIcon) {
        return (
            <TouchableOpacity onPress={()=> {
                this.onPress(store, data)
            }}>
                <Image style={styles.thumb} source={checkIcon}/>
            </TouchableOpacity>
        )
    }

    onPress = (store, data)=> {
        store.onChecked(data.id)
        this.props.onPress ? this.props.onPress(store.getSelectArray()) : ()=> {}
    }


}

const styles = StyleSheet.create({
    thumb: {
        marginRight: 10
    },
    rowContainer: {
        flexDirection: 'row',
        padding: 10,
        height: 70,
        // justifyContent: 'center',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#eef0f3'
    },
})

import React, {Component, PropTypes} from 'react'
import {
    View,
    Dimensions,
    ListView,
    TouchableOpacity,
} from 'react-native'

let {width, height} = Dimensions.get('window');
import {observer} from 'mobx-react';
import CarItem from './CarItem';
import CarItemState from './CarItemState';
const store = new CarItemState();

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

@observer
export default class TestListPage2 extends Component {

    //構(gòu)造函數(shù)
    constructor(props) {
        super(props)

        this.state = {
            dataSource: [],
        }
    }


    componentDidMount() {

        //模擬請求后臺返回的數(shù)據(jù)
        setTimeout(() => {
            //默認(rèn)選中第二個
            let responseData = [{id: 100,checked:false}, {id: 101,checked:true}, {id: 102,checked:false}]
            store.initData(responseData);
            this.setState({
                dataSource: responseData
            });
        }, 2000);
    }

    render() {
        console.warn('刷新了render')
        return (
            <View style={{flex: 1}}>
                <ListView
                    enableEmptySections={true}
                    renderRow={this.renderRow}
                    dataSource={ds.cloneWithRows(this.state.dataSource)}/>
            </View>
        );
    }


    renderRow = (rowData, sectionID, rowID, highlightRow) => {
        return (
            <CarItem  selectIndex={1}  data={store.list[rowID]} key={rowID} store={store} onPress={this.onPress}/>
        )
    }

    onPress = (arrayIDS)=> {
        console.warn(arrayIDS.join('-'))
    }

}