React Native(Mobx单选实现,2017-09-05)

1.CarItemState 3个函数(1)全选/反选 (2)勾选1个 (3)获取选中的数组id
2.CartItem 左边选择按钮+右边显示一个文字
3.CartItem里面的图片要自己替换一下
4.可以设置默认值
5.只能选中其中一个
6.不会渲染重复render

多选.gif

import {observable, useStrict, action, computed} from 'mobx';
// useStrict(true);//这里用到了严格模式，在修改类的成员属性的时候函数前面需要加上 @action

export default class CarItemState {
    // 数据源
    @observable list = [];
    // 是否全选
    @observable checkedAll = false;//默认不全选


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


    //获取选中状态
    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);//请求参数
            }
        }

        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;//可以根据服务器状态进行选中
                }

                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';

// 注意: 这里子组件必须监听
@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 (
            
                {this.renderLeftImage(data, store, checkIcon)}
                {data.id}
            
        );
    }


    //左边图片选择
    renderLeftImage(data, store, checkIcon) {
        return (
             {
                this.onPress(store, data)
            }}>
                
            
        )
    }

    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 {

    //构造函数
    constructor(props) {
        super(props)

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


    componentDidMount() {

        //模拟请求后台返回的数据
        setTimeout(() => {
            //默认选中第二个
            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 (
            
                
            
        );
    }


    renderRow = (rowData, sectionID, rowID, highlightRow) => {
        return (
            
        )
    }

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

}