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）

效果图

图片.png