react-native 三级联动城市 react-native-picker

第一步：
装依赖,把react-native-picker的依赖放在src/node_modules里面
在 package.json里面引入
"react-native-picker": "file:./src/node_modules/react-native-picker",

说明：src/node_modules是自己在src 里面创建的node_modules，跟项目自带的node_modules 不一样

###使用

import React from 'react';
import { StyleSheet, Text, View,ScrollView,Image,TextInput, TouchableOpacity, Keyboard,Alert ,NativeModules} from 'react-native'
import Picker from 'react-native-picker'
import area from '../../../../area.json';

class MyDatumBasic extends React.Component {
    static navigationOptions = {
        title: '',     
    };
    constructor(props) {
        super(props);
        this.state={
            userCity:'',
            companyAreaArray:[]
        }
    }

    _createAreaData = () => {
        let data = [];
        let len = area.length;
        for(let i=0;i<len;i++){
            let city = [];
            for(let j=0,cityLen=area[i]['city'].length;j<cityLen;j++){
                let _city = {};
                _city[area[i]['city'][j]['name']] = area[i]['city'][j]['area'];
                city.push(_city);
            }

            let _data = {};
            _data[area[i]['name']] = city;
            data.push(_data);
        }
        return data;
    }

    _companyAreaClickAction = () => {
        Keyboard.dismiss();
        this.setState({isShowMengCeng: true})
        Picker.init({
            pickerData: this._createAreaData(),
            selectedValue: this.state.companyAreaArray,
            pickerConfirmBtnText: '确认',
            pickerCancelBtnText: '取消',
            pickerConfirmBtnColor: [70,123,237,1],
            pickerCancelBtnColor: [144,144,144,1],
            pickerTitleColor: [51,51,51,1],
            pickerToolBarBg: [255,255,255,1],
            pickerToolBarFontSize: 15,
            pickerBg: [245,245,245,1],
            pickerFontColor: [48,48,48,1],
            pickerFontSize: 17,
            pickerRowHeight: 48,
            pickerTitleText: '选择城市',
            onPickerConfirm: data => {
                this.setState({
                    companyAreaArray: data,
                    userCity: data.join('-'),
                    isShowMengCeng: false,
                })
            },
            onPickerCancel: data => {
                this.setState({isShowMengCeng: false})
            },
        });
        Picker.show();
    }

  onChangedCity(text){
        this.setState({userCity:text})
    }

    render() {
   
        return (
            <View style={styles.container}>
               <View style={{flexDirection:'row',alignItems:'center',width:'98%'}}>
                    <Text style={styles.con_title}>城市</Text>
                    <TextInput placeholder='请输入城市'
                        style={styles.con_input}
                        onChangeText = {(text)=>this.onChangedCity(text)}
                        value={this.state.userCity}
                        underlineColorAndroid="transparent"
                        >
                    </TextInput>
                    <View style={styles.btnyz}>
                        <TouchableOpacity
                            style={{padding:10}}
                            onPress={()=>{this._companyAreaClickAction()}}>
                        <Image style={styles.right_icon} source={require('../../../images/my/right.png')}/>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    }
}


select = (state) => {
    return state.user
}
export default connect(select)(MyDatumBasic);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        position:'relative'
    },
con_title:{
        lineHeight:50,
        width:'20%',
        flex:2,
        paddingLeft:10,
        fontSize:15,
        color:'#333333',

        width:60
    },
    con_input:{
        paddingLeft:20,
        height:45,
        flex:7
        // width:'80%'
    },
    btnyz:{
        marginRight:10,
        marginTop:15
    },
    right_icon:{
        width:10,
        height:15,
    },
  
});

area.json数据结构

[
	{
		"name": "北京",
		"city": [
			{
				"name": "北京",
				"area": [
					"东城区",
					"西城区",
					"崇文区",
					"宣武区",
					"朝阳区",
					"丰台区",
					"石景山区",
					"海淀区",
					"门头沟区",
					"房山区",
					"通州区",
					"顺义区",
					"昌平区",
					"大兴区",
					"平谷区",
					"怀柔区",
					"密云县",
					"延庆县"
				]
			}
		]
	},
	{
		"name": "天津",
		"city": [
			{
				"name": "天津",
				"area": [
					"和平区",
					"河东区",
					"河西区",
					"南开区",
					"河北区",
					"红桥区",
					"塘沽区",
					"汉沽区",
					"大港区",
					"东丽区",
					"西青区",
					"津南区",
					"北辰区",
					"武清区",
					"宝坻区",
					"宁河县",
					"静海县",
					"蓟  县"
				]
			}
		]
	},
]

数据参考我主页的下一篇文章。。。。
[城市数据请参考]（https://pan.baidu.com/s/1Qj-fxnDcnWNPlneQy-King）

###效果图