ReactNative 原生地址picker，由于项目需要自己写

示例图片

//  ---------------------------------------------------
//  --------------------- 调用方法 ---------------------
//  ---------------------------------------------------

// 声明
// constructor(props) {
//   super(props);
//   this.state = {isshowPicker: false,}
// }

//  调用
{
  /* <MCMultiSelectPicker
  isHide={this.state.isshowPicker} // 传入状态 
  sendFunc={this.placeOfAncestryPickerTitle.bind(this)} // 回调方法
  callBackValue={this.callbackCancle.bind(this)} // 取消事件回调方法
/>; */
}

// 要实现的方法

// // 数据回调
// placeOfAncestryPickerTitle(pickerTitle) {
//   this.setState({
//     placeOfAncestry: pickerTitle,
//   });
// }

// // 所有 Picker 取消回调
// callbackCancle(state) {
//   this.setState({
//     isshowPicker: state,
//   });
// }

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  Picker,
  Modal,
  TouchableOpacity,
} from "react-native";
import { db } from "../../../../util";

const { height, width } = Dimensions.get("window");

export default class MCMultiSelectPicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pickerCityTitle: "", // 省/直辖市
      pickerDistrictTitle: "", // 市
      pickerCountyTitle: "", // 县
      cityIndex: 0,
      districtIndex: 0,
      countyIndex: 0,
    };
  }

  cancle = () => {
    this.props.callBackValue(false);
  };

  isOK = () => {
    this.props.callBackValue(false);
  };

  render() {
    const { isHide } = this.props;
    return (
      <Modal
        animationType="fade"
        transparent={true}
        visible={isHide}
        onShow={() => {}}
        onRequestClose={() => {
          this.props.callBackValue(false);
        }}
      >
        <View style={currentViewStyle.modalStyle}>
          <View style={{ flexDirection: "row", backgroundColor: "white" }}>
            <TouchableOpacity
              style={currentViewStyle.TOLeftStyle}
              onPress={() => this.cancle()}
            >
              <Text>{"取消"}</Text>
            </TouchableOpacity>

            <View style={currentViewStyle.lineStyle} />

            <TouchableOpacity
              style={currentViewStyle.TORightStyle}
              onPress={() => this.isOK()}
            >
              <Text style={currentViewStyle.TORightTextStyle}>{"确定"}</Text>
            </TouchableOpacity>
          </View>
          <View style={{ flexDirection: "row" }}>
            <Picker
              selectedValue={this.state.pickerCityTitle} // 选中状态
              style={currentViewStyle.pickerStyle}
              onValueChange={(itemValue, itemIndex) => {
                this.setState({
                  pickerCityTitle: itemValue, // 选中状态
                  cityIndex: itemIndex,
                  districtIndex: 0,
                });
                this.props.sendFunc(
                  db.CityInfo[itemIndex]["label"] +
                    db.CityInfo[itemIndex].children[0]["label"] +
                    db.CityInfo[itemIndex].children[0].children[0]["label"]
                );
              }}
            >
              {db.CityInfo.map((info, index) => {
                return (
                  <Picker.Item
                    label={String(info["label"])}
                    value={String(info["label"])}
                  />
                );
              })}
            </Picker>
            <Picker
              selectedValue={this.state.pickerDistrictTitle}
              style={currentViewStyle.pickerStyle}
              onValueChange={(itemValue, itemIndex) => {
                this.setState({
                  pickerDistrictTitle: itemValue,
                  districtIndex: itemIndex,
                  countyIndex: 0,
                });
                this.props.sendFunc(
                  db.CityInfo[this.state.cityIndex]["label"] +
                    db.CityInfo[this.state.cityIndex].children[itemIndex][
                      "label"
                    ] +
                    db.CityInfo[this.state.cityIndex].children[itemIndex]
                      .children[0]["label"]
                );
              }}
            >
              {db.CityInfo[this.state.cityIndex].children.map((info, index) => {
                return (
                  <Picker.Item
                    label={String(info["label"])}
                    value={String(info["label"])}
                  />
                );
              })}
            </Picker>
            <Picker
              selectedValue={this.state.pickerCountyTitle}
              style={currentViewStyle.pickerStyle}
              onValueChange={(itemValue, itemIndex) => {
                this.setState({
                  pickerCountyTitle: itemValue,
                  countyIndex: itemIndex,
                });
                this.props.sendFunc(
                  db.CityInfo[this.state.cityIndex]["label"] +
                    db.CityInfo[this.state.cityIndex].children[
                      this.state.districtIndex
                    ]["label"] +
                    db.CityInfo[this.state.cityIndex].children[
                      this.state.districtIndex
                    ].children[itemIndex]["label"]
                );
              }}
            >
              {db.CityInfo[this.state.cityIndex].children[
                this.state.districtIndex
              ].children.map((info, index) => {
                return (
                  <Picker.Item
                    label={String(info["label"])}
                    value={String(info["label"])}
                  />
                );
              })}
            </Picker>
          </View>
        </View>
      </Modal>
    );
  }
}

const currentViewStyle = StyleSheet.create({
  // modal的样式
  modalStyle: {
    backgroundColor: "rgba(1,1,1,0.5)",
    justifyContent: "flex-end",
    flex: 1,
  },
  TOLeftStyle: {
    paddingLeft: 20,
    flex: 4,
    height: 40,
    backgroundColor: "white",
    justifyContent: "center",
  },
  lineStyle: { height: 40, width: 1, backgroundColor: "#F2F2F2" },
  TORightStyle: {
    paddingRight: 20,
    flex: 4,
    height: 40,
    backgroundColor: "white",
    justifyContent: "center",
  },
  TORightTextStyle: {
    textAlign: "right",
    backgroundColor: "white",
  },
  pickerStyle: {
    width: width / 3,

    backgroundColor: "#F2F2F2",
  },
});

db的文件地址： https://gitee.com/satoshi_uma/picker-dbjs