react-native-ba-picker/BAPickerModal.js

import React, {Component} from 'react';

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

import BAPicker from './BAPicker';
import PropTypes from 'prop-types';

class BAButton extends Component {
    render() {
        const {
            style,
            title,
            onPress
        } = this.props;
        return (
            <TouchableOpacity style={[styles.btnStyle, style]} onPress={() => onPress()}>
                <Text style={{color: 'white'}}>{title}</Text>
            </TouchableOpacity>
        )
    }
}

BAButton.propTypes = {
    style: PropTypes.any,
    title: PropTypes.string,
    onPress: PropTypes.func
};

export default class BAPickerModal extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedIndex: this.props.selectedIndex
        }
    }

    render() {
        const {
            modalVisible,
            onClosePress,
            list,
            onConfirm,
            itemStyle,
            topBarStyle,
            cancelTitle=null,
            confirmTitle=null,
            title = ""
        } = this.props;

        return (
            <Modal
                animationType="none"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => { onClosePress() }}>
                <View style={styles.modalContainer}>
                    <View style={[styles.topContainer, topBarStyle]}>
                        <BAButton title={cancelTitle? cancelTitle: "取消"} onPress={() => onClosePress()} />
                        <View style={{flex: 1, justifyContent: 'center', alignItems:'center'}}>
                            <Text style={{color: 'white', fontSize: 16}}>{title?title: ""}</Text>
                        </View>
                        <BAButton title={confirmTitle?confirmTitle: "确定"} onPress={() => onConfirm({index: this.state.selectedIndex, item: list[this.state.selectedIndex]})} />
                    </View>

                    <View style={styles.pickerStyle}>
                    <BAPicker
                        style={styles.pickerStyle}
                        itemStyle={itemStyle}
                        data={list}
                        selectedIndex={this.state.selectedIndex}
                        onValueChange={(resultObj) => { this.setState({selectedIndex: resultObj.index}); }}/>
                    </View>
                    
                </View>
            </Modal>
        )
    }

}

BAPickerModal.propTypes = {
    modalVisible: PropTypes.bool,
    onClosePress: PropTypes.func,
    list: PropTypes.array,
    selectedIndex: PropTypes.number,
    onConfirm: PropTypes.func,
    itemStyle: PropTypes.object,
    topBarStyle: PropTypes.object,
    cancelTitle: PropTypes.string,
    confirmTitle: PropTypes.string,
    title: PropTypes.string
};

const styles = StyleSheet.create({
    modalContainer: {
        width: '100%',
        height: '100%',
        justifyContent: 'flex-end',
        backgroundColor: '#00000033'
    },

    topContainer: {
        width: '100%',
        height: 44,
        flexDirection: 'row',
        backgroundColor: '#58A8F5'
    },

    pickerStyle: {
        flex: 0,
        width: '100%',
        height: 200,
        backgroundColor: 'white',
        overflow: "hidden"
    },

    btnStyle: {
        width: 60,
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center'
    }
});