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

多選.gif

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

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


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


    //默認(rèn)全選
    test(dataList) {
        let newArray = []
        for (let i = 0; i < dataList.length; i++) {
            let dict = dataList[i]
            dict.checked = false;//可以根據(jù)服務(wù)器狀態(tài)進(jìn)行選中
            newArray.push(dict);//請(qǐng)求參數(shù)
        }
        return newArray;
    }

    //獲取選中狀態(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);//請(qǐng)求參數(shù)
            }
        }

        return newArray;
    }

    // 勾選
    @action onChecked = (id) => {
        this.list.forEach(item => {
            if (item.id === id) {
                item.checked ? this.checkedAll = false : null;
                item.checked = !item.checked;
            }
        });
        !this.list.some((item) => item.checked === false) ? this.checkedAll = true : null;

    }

    // 勾選全選
    @action onCheckedAll = () => {
        this.checkedAll = !this.checkedAll;
        this.checkedAll ? this.list.forEach(item => item.checked = true) : this.list.forEach(item => item.checked = false);
    };

}

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 {
    Text,
    View,
    TouchableHighlight,
    Dimensions,
    StyleSheet,
    Image,
    ListView,
    FlatList,
    TouchableOpacity,
    AsyncStorage,
    NativeModules,//與原生通訊
} from 'react-native'


let {width, height} = Dimensions.get('window');


import {observer} from 'mobx-react';
import CarItem from './CarItem';
import CarFooter from './CarFooter';
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() {

        //模擬請(qǐng)求后臺(tái)返回的數(shù)據(jù)
        setTimeout(() => {
            let responseData = [{id: 100}, {id: 101}, {id: 102}]
            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)}/>
                <CarFooter store={store} onPress={this.onPress}/>
            </View>
        );
    }


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

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

}