react native一个简单的封装

简单封装一个UI组件
调用：

{

                                        console.log(selectIndexSource)
                                    }}
                                />

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {
    View,
    StyleSheet,
    FlatList,
    Platform,
    RefreshControl,
    InteractionManager,
    Dimensions,
    DeviceEventEmitter,
    Image,
    Text,
    Modal,
    TouchableOpacity,
} from 'react-native';

const screenHeight = Dimensions.get('window').height;
const screenWidth = Dimensions.get('window').width;

export default class leftPopoverModule extends Component {

static propTypes = {
        title: PropTypes.string.isRequired,
        dataSource: PropTypes.array.isRequired,
        multiType: PropTypes.bool.isRequired,
        index: PropTypes.number,
        selectItem:PropTypes.func,
    };

    constructor(props) {
        super(props);

        var dataSource = [];
        for (let i = 0; i < this.props.dataSource.length; i++) {

            if (this.props.index && this.props.index == i) {
                dataSource.push({'item': this.props.dataSource[i], 'index': 1})
            } else {
                dataSource.push({'item': this.props.dataSource[i], 'index': 0})
            }
        }

        if (this.props.index){
            this.props.selectItem([this.props.dataSource[this.props.index]])
        }

        this.state = {
            title: null,
            dataSource: dataSource,
            multiType:this.props.multiType,
        };
    }

    setTitle(title) {
        this.setState({title: title});
    }

    setDataSource(dataSource) {
        this.setState({dataSource: dataSource});
    }

    setMultiType(multiType){
        this.setState({multiType:multiType});
    }

    imgClick(index) {

        var dataSource = this.state.dataSource

        var selectIndexSource = [];
        for (let i = 0; i < this.props.dataSource.length; i++) {

            if (this.state.multiType){
                if (i == index) {
                    dataSource[i].index = dataSource[i].index == 0 ? 1 : 0;
                }
            }else {
                if (i == index) {
                    dataSource[i].index = dataSource[i].index == 0 ? 1 : 0;
                }else {
                    dataSource[i].index = 0;
                }
            }

            if (dataSource[i].index == 1){
                selectIndexSource.push(dataSource[i].item)
            }
        }
        this.setState({
            dataSource: dataSource,
        })


        this.props.selectItem(selectIndexSource)
    }

    render() {

        return (
            
                {
                    this.state.title == null ?
                        this.props.title
                        :
                        this.state.title
                }
                
                    
                        {this.itemModule(0, true)}
                        {this.itemModule(1, false)}
                    
                    
                        {this.itemModule(2, true)}
                        {this.itemModule(3, false)}
                    
                
            
        )
    }

    itemModule(index, isLeft) {
        return (
            
                {
                    this.state.dataSource.length < 1 ?
                        this.props.dataSource[index].item
                        :
                        this.state.dataSource[index].item
                }
                {this.state.dataSource[index].index == 1 ?
                    
                    :
                    null
                }
            
        )
    }
}

const styles = StyleSheet.create({
    container: {
        padding: 10,
        borderBottomColor: '#bebebe',
        borderBottomWidth: 1,
        paddingBottom: 0,
    },
    itemRow: {
        flexDirection: 'row',
        paddingBottom: 10,
    },
    itemStyle: {
        width: (screenWidth * 0.8 - 30) / 2,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        height: 50,
    },
    itemImg: {
        position: 'absolute',
        resizeMode: 'contain',
        height: 50,
        width: (screenWidth * 0.8 - 30) / 2,
    }
});

leftPopoverModule.propTypes={
    title:React.PropTypes.string,//右侧上部小标题
    dataSource:React.PropTypes.array,//需要显示的四个模块内容
    index:React.PropTypes.number,//默认选中第几个，可不传(即无选中)
    multiType:React.PropTypes.bool,//单选false，多选true
    selectItem:React.PropTypes.func,//选中值回调
};

https://blog.csdn.net/wwl901215/article/details/70947579