rn 动态picker 使用

import React from "react";
import {View,
    Text,
    Image,
    Modal,
    Navigator,
    TextInput,
    ScrollView,
    StyleSheet,
    Dimensions,
    TouchableHighlight,
    Button,
    Picker,
} from "react-native";


import MapView from './MapView'

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

export default class Seting extends React.Component {

    // 构造函数
    constructor(props) {
        super(props);
        this.state = {
            show:false,
            language:'',
            data : [
                '卧室',
                '客厅',
                '厨房',
                '咖啡厅',
            ],
        };
    }

    // 加载完成
    componentDidMount(){
        //
    }

    // view卸载
    componentWillUnmount(){
        //
    }

    // 自定义方法区域
    // your method
    _leftButtonClick() {

    }

    _rightButtonClick() {
        //
        console.log('右侧按钮点击了');
        this._setModalVisible();
    }

    // 显示/隐藏 modal
    _setModalVisible() {
        let isShow = this.state.show;
        this.setState({
            show:!isShow,
        });
    }

    changeValue = (itemValue) =>{
        this.setState({language:itemValue});
        console.log('  改变了选择的值 '  + itemValue);
    }

    sureAction = () =>{
        this._setModalVisible();

        console.log('  点击了确定按钮 '  +  this.state.language);
    }

    cancleAction = () =>{
        this._setModalVisible();

        console.log('  点击了取消按钮 '  +  this.state.language);
    }

    onClick = () =>{
        console.log('右侧按钮点击了');
        this._setModalVisible();
    }

    onClickk = () =>{
        console.log(' language ' + this.state.language);
    }


    render() {
        return (
            <View style={styles.container}>
                <Modal
                    animationType='slide'
                    transparent={true}
                    visible={this.state.show}
                    onShow={() => {}}
                    onRequestClose={() => {}} >
                    <View style={styles.modalStyle}>
                        <View style={styles.subView}>
                            <Text style={styles.titleText}>
                                选择房间
                            </Text>

                            <Picker style={styles.contentPick}
                            // visible={this.state.isShow}
                            selectedValue={this.state.language}
                            // style={{ height: 150, width: 100 }}
                            // onValueChange={(itemValue, itemIndex) => this.setState({language:itemValue})}
                            onValueChange={(itemValue,itemIndex) => this.changeValue(itemValue)}
                            >
                            {/*<Picker.Item label="Java" value="java" />*/}
                            {/*<Picker.Item label="JavaScript" value="js" />*/}
                            {/*/!*<Picker.Item label="Java" value="java1" />*!/*/}
                            {/*/!*<Picker.Item label="JavaScript" value="js1" />*!/*/}
                            {this.state.data.map((value) => <Picker.Item key={value} label={value} value={value} />)}
                            </Picker>

                            <View style={styles.horizontalLine} />
                            <View style={styles.buttonView}>
                                <TouchableHighlight underlayColor='transparent'
                                                    style={styles.buttonStyle}
                                                    // onPress={this._setModalVisible.bind(this)}
                                                    onPress={this.cancleAction}>

                                    <Text style={styles.buttonText}>
                                        取消
                                    </Text>
                                </TouchableHighlight>
                                <View style={styles.verticalLine} />
                                <TouchableHighlight underlayColor='transparent'
                                                    style={styles.buttonStyle}
                                                    onPress={this.sureAction}>
                                    <Text style={styles.buttonText}>
                                        确定
                                    </Text>
                                </TouchableHighlight>
                            </View>
                        </View>
                    </View>
                </Modal>
                <Button
                    title='click'
                    onPress={() => this.onClick()}
                />
                <Button
                    title='click'
                    onPress={() => this.onClickk()}
                />
            </View>
        );
    }
}


// css样式
var styles = StyleSheet.create({
    container:{
        flex:1,
        // backgroundColor: '#ECECF0',
        backgroundColor:'#e9c60f',
    },

    // modal的样式
    modalStyle: {
        backgroundColor:'#000000',
        alignItems: 'center',
        justifyContent:'center',
        flex:1,
    },
    // modal上子View的样式
    subView:{
        marginLeft:60,
        marginRight:60,
        backgroundColor:'#fff',
        alignSelf: 'stretch',
        justifyContent:'center',
        borderRadius: 10,
        borderWidth: 0.5,
        // borderColor:'#ccc',
        borderColor:'#318BCC'
    },
    // 标题
    titleText:{
        marginTop:10,
        marginBottom:5,
        fontSize:16,
        fontWeight:'bold',
        textAlign:'center',
        backgroundColor:'#EC4C3A',
    },
    // 内容
    contentText:{
        margin:8,
        fontSize:14,
        textAlign:'center',
    },
    contentPick:{
        margin:8,

        // alignItems:'center',
        justifyContent:'center',
        backgroundColor:'#65EC49',
        // height:100,可修改高度，不设置为默认高度
    },

    // 水平的分割线
    horizontalLine:{
        marginTop:5,
        height:0.5,
        backgroundColor:'#ccc',
    },
    // 按钮
    buttonView:{
        flexDirection: 'row',
        alignItems: 'center',
    },
    buttonStyle:{
        flex:1,
        height:44,
        alignItems: 'center',
        justifyContent:'center',
    },
    // 竖直的分割线
    verticalLine:{
        width:0.5,
        height:44,
        backgroundColor:'#ccc',
    },

    buttonText:{
        fontSize:16,
        color:'#3393F2',
        textAlign:'center',
    },
});