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

Z时代
2024-01-10
分类：综合

react

第一步：

装依赖,把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）

###效果图

以上是 react-native 三级联动城市 react-native-picker 的全部内容，来源链接： utcz.com/z/383251.html