react-native 自定义一个地址选择器

最新推荐文章于 2025-06-03 10:41:24 发布

学术袁

最新推荐文章于 2025-06-03 10:41:24 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： react-native 文章标签： react-native react-native 地址选择器 react-native 地址组件

本文链接：https://blog.youkuaiyun.com/junhuahouse/article/details/95205448

地址选择器介绍

地址数据，线上即时请求。json的数据结构如下，

{
    "code": 200,
    "msg": "success",
    "data": [
        {
            "id": 1,
            "name": "北京"
        },
        {
            "id": 31,
            "name": "新疆"
        },
        {
            "id": 4,
            "name": "重庆"
        },
        .
        .
        .
        .
    ]
}

地址选择器的效果如图，一个层级，一个层级的进行选择：

在这里插入图片描述
提供实现上图选择地址效果的源码：

import React, { Component } from "react";

import {
  View,
  Text,
  Image,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
  FlatList,
  DeviceEventEmitter
} from "react-native";
import {
  screenW,
  screenH,
  scaleSizeW,
  scaleSizeH,
  __IOS__,
  setSpText
} from "../util/screenUtil";
import { BaseDialog } from "react-native-pickers";
import { Button } from "react-native-elements";
import DrawableIndex from "../res/DrawableIndex";
import ScrollAbleView from "react-native-scrollable-tab-view";
import Api from "../util/api";
import {
  getPrinceList,
  getCityList,
  getAreaList,
  getTownList
} from "../pages/const/URL";
import AddressListProvice from "./AddressList";
import AddressListCity from "./AddressList";
import AddressListArea from "./AddressList";
import AddressListTown from "./AddressList";
///   省、市、区、城镇
const PROVINCE = 0,
  CITY = 1,
  AREA = 2,
  TOWN = 3;

export default class CustomerDialogSheet extends BaseDialog {
  static defaultProps = {};

  constructor(props) {
    super(props);

    this.state = {};
  }

  _getContentPosition() {
    return { justifyContent: "flex-end", alignItems: "center" };
  }

  show(text) {
    super.show(null, { text: text });
  }

  renderContent() {
    return (
      <View
        style={
  
  {
          width: this.mScreenWidth,
          backgroundColor: "#f8f8f8",
          minHeight: screenH * 0.6
        }}
      >
        <AddressContainer
          onAddressObjSelected={local => {
            // console.log("打印输出-onAddressObjSelected", local);
            this.props.onAddressObjSelected(local);
            this.dismiss();
          }}
        />
      </View>
    );
  }
}

///地址选择-地址容器
class AddressContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      province: { name: null, id: null }, //省份
      city: { name: null, id: null }, //市
      area: { name: null, id: null }, //区
      town: { name: null, id: null } //乡镇
    };
  }

  _onChangeIndex = index => {
    // console.log("打印输出-_onChangeIndex", index);
  };

  componentDidMount() {}
  render() {
    return (
      <View style={
  
  { flex: 1, backgroundColor: "white" }}>
        <ScrollAbleView
          style={
  
  {
            height: scaleSizeH(80),
            backgroundColor: "white"
          }}