使用Picker组件完成的自制地区选择组件

import React, { Component } from 'react'
import { Button, Modal, Text, TextInput, View } from 'react-native'
import data from '@bang88/china_city_data'
import {Picker} from '@react-native-community/picker'

export default class App extends Component {
  state={address:'',visible:true}
  _addressChange=(p,c,d,dv)=>{
    this.setState({address:p,visible:false})
  }
  
  render(){
   return <View>
        <TextInput placeholder="请输入地址" value={this.state.address}/>
        <Button onPress={()=>this.setState({visible:true})} title="输入"/>
        <Modal visible={this.state.visible} transparent={true}>
          <View style={{flex:1,justifyContent:"center",alignItems:'center'}}>
            <View style={{width:300,height:300,backgroundColor:'antiquewhite'}}>
              <District onValueChange={this._addressChange}/>
            </View>
          </View>
        </Modal>
        
    </View>
  }
}

class District extends Component{
  state={province:data[0],city:data[0].children[0],district:data[0].children[0].children[0]}
  _confirm=()=>{
    this.props.onValueChange(this.state.province.label,this.state.city.label,this.state.district.label,this.state.district.value)
  }
  _proChnage=pro=>{
    this.setState({province:pro,city:pro.children[0],district:pro.children[0].children[0]})
  }
  _cityChange=city=>{
    this.setState({city,district:city.children[0]})
  }
  _districtChange=district=>{
    this.setState({district})
  }
  render() {
    return (
      <View>
        <Text>{this.state.province.label}---{this.state.city.label}--{this.state.district.label}</Text>
        <Button title="确认" onPress={this._confirm}/>
        <Picker mode="dropdown" selectedValue={this.state.province} onValueChange={this._proChnage}>
          {data.map((pro,index)=>{
            return <Picker.Item key={pro.value} label={pro.label} value={pro}/>
          })}
        </Picker>
        <Picker selectedValue={this.state.city} onValueChange={this._cityChange}>
            {this.state.province.children.map(city=><Picker.Item key={city.value} label={city.label} value={city}/>)}
        </Picker>
        <Picker selectedValue={this.state.district} onValueChange={this._districtChange}>
          {this.state.city.children.map(district=><Picker.Item key={district.value} label={district.label} value={district}/>)}
        </Picker>

      </View>
    )
  }
}