地址选择器介绍
地址数据,线上即时请求。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"
}}