React Native Picker (城市选择器)

/**
 * Created by apple on 2016/10/12.
 */
/**
 Sample React Native App

 *  https://github.com/facebook/react-native

 *  @flow
 */


"use strict"

import React, {Component} from 'react'
import {
    AppRegistry,
    View,
    Text,
    Picker,
    StyleSheet
} from 'react-native'

// 读取本地json文件
let jsonData = require('./area.json')

class HelloWorld extends Component {

    // 定义默认属性
    static defaultProps = {
        // 默认显示北京(省)
        selectedProvince: '北京',
        // 默认显示北京省会市)
        selectedCity: '北京',
        // 默认显示(区)
        selectedArea: '东城区'
    }

    // 通过 state 更新
    constructor(props) {
        super(props)

        this.state={
            // 省
            province: [],
            // 市
            city: [],
            // 区
            area: [],
            // 选中的省
            selectedProvince: this.props.selectedProvince,
            // 选中的市
            selectedCity: this.props.selectedCity,
            // 选中的地区
            selectedArea: this.props.selectedArea,
        }
    }


    // 获取全国省: ['省1', '省2', '省3'......]
    getProvince() {
        var result = [];

        for (var code in jsonData) {

            result.push(jsonData[code].name);
        }

        return result;
    }

    // 获取各个省的城市[['省1-城市1', '省1-城市2', '省1-城市3'......],['省2-城市1', '省2-城市2', '省2-城市3'......]]
    getProvinceCity(province) {
        var result = [];
        var cityData = [];

        for (var code in jsonData) {

            let temp = jsonData[code].name
            if (temp == province) {

                cityData = jsonData[code].city
                for (var j in cityData) {
                    result.push(cityData[j].name);
                }

                break;
            }
        }

        return result;
    }

    // 获取各个省的城市[['省1-城市1-区1', '省1-城市1-区2', '省1-城市1-区3'......]......]
    getProvinceCityArea(province, city) {

        var result = [];
        var cityData = [];

        for (var code in jsonData) {

            let tempProvince = jsonData[code].name
            if (tempProvince == province) {

                cityData = jsonData[code].city
                for (var j in cityData) {
                    let tempCity = cityData[j].name

                    // console.log('查询省: ' + tempProvince + '    查询城市: ' + city)

                    if (tempCity == city) {

                        result = cityData[j].area
                        // console.log('查询区: ' + result)

                        break;
                    }
                }
            }
        }

        return result;
    }


    componentDidMount() {

        var province = this.getProvince();
        this.state.selectedProvince = province[0];

        var city = this.getProvinceCity(this.state.selectedProvince)
        this.state.selectedCity = city[0]

        var area = this.getProvinceCityArea(this.state.selectedProvince, this.state.selectedCity)
        this.state.selectedArea = area[0]


        this.setState({
            province: province,
            city: city,
            area: area
        });

        console.log('\n******省: '   + province + '\n******默认省: '  + this.state.selectedProvince)
        console.log('\n******城市: ' + city     + '\n******默认城市: ' + this.state.selectedCity)
        console.log('\n******区: '   + area     + '\n******默认区: '   + this.state.selectedArea)
    }

    updateProvince(param) {

        var cityData = this.getProvinceCity(param)
        let defaultCity = cityData[0]

        var areaData = this.getProvinceCityArea(param, defaultCity)
        let defaultArea = areaData[0]

        this.setState({
            selectedProvince: param,
            selectedCity: defaultCity,
            selectedArea: defaultArea,
            city: cityData,
            area: areaData,

        })
    }

    updateProvinceCity(city) {

        var areaData = this.getProvinceCityArea(this.state.selectedProvince, city)
        let defaultArea = areaData[0]

        // console.log(this.state.selectedProvince, city, areaData)

        this.setState({
            selectedCity: city,
            selectedArea: defaultArea,
            area: areaData,

        })
    }

    updateProvinceCityArea(area) {

        this.setState({
            selectedArea: area,

        })
    }


    renderPicker(key, i) {

        return <Picker.Item key={i} label={key} value={key} />
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>{this.state.selectedProvince+this.state.selectedCity+this.state.selectedArea}</Text>
                <View style={styles.pickerViewContainer}>
                    <Picker style={{flex: 1}}
                            selectedValue={this.state.selectedProvince}
                            onValueChange={(language) => this.updateProvince(language)}>
                        {this.state.province.map((key, i) => this.renderPicker(key, i))}
                    </Picker>
                    <Picker style={styles.pickerItem}
                            selectedValue={this.state.selectedCity}
                            onValueChange={(language) => this.updateProvinceCity(language)}>
                        {this.state.city.map((key, i) => this.renderPicker(key, i))}
                    </Picker>
                    <Picker style={{flex: 1}}
                            selectedValue={this.state.selectedArea}
                            onValueChange={(area) => this.updateProvinceCityArea(area)}>
                        {this.state.area.map((key, i) => this.renderPicker(key, i))}
                    </Picker>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',
        backgroundColor: '#F5FCFF'
    },
    text: {
        width: 200,
        height: 60,
        marginTop: 100,
        backgroundColor: 'white',
        justifyContent:'center',
        alignItems: 'center',
        borderRadius: 5,
    },
    pickerViewContainer: {
        flex: 1,
        flexDirection: 'row',
        paddingTop: 30

    },
    pickerItem: {
        flex: 1,
    }
})


AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

 

******************************  知识点  ******************************

1.读取本地json、json解析

******************************  效果图  ******************************

 

城市文件：https://files.cnblogs.com/files/madaha/area.json.zip