React Native技术篇—自定义地址选择器

注意：未经允许不可私自转载，违者必究

React Native官方文档：https://reactnative.cn/docs/getting-started/

项目GitHub地址：https://github.com/zhouwei1994/nativeCase.git

自定义地址选择器代码

本组件里面的fetch方法请查看：https://blog.csdn.net/weixin_40614372/article/details/86522161

import React, { Component } from 'react';
import { StyleSheet, ScrollView, Text, View, Dimensions, TouchableHighlight } from 'react-native';
import $http from './../../config/fetch';
const { width, height } = Dimensions.get('window');
var scrollViewRef;
class Address extends Component {
    static defaultProps = {
        value: [],//默认数据
        length: 3,//地址选择的长度，从省开始
        activeColor: "#F00" //选中的颜色
    };
    constructor(props) {
        super(props);
        this.state = {
            //选出的值
            addressVal: [],
            //当前选择
            addressIndex: 0,
            //列表的值
            addressList: []
        };
        this.SelectListAddress = this.SelectListAddress.bind(this);
        this.getRegion = this.getRegion.bind(this);
        this.selectType = this.selectType.bind(this);
    }
    //加载完成的生命钩子
    componentDidMount() {
        this.setState({
            addressVal: this.props.value
        });
        this.getRegion(0);
    }
    componentWillUnmount() {
        this.setState = (state, callback) => {
            return;
        };
    }
    //获取地址信息
    getRegion(uid) {
        const _this = this;
        $http.get('kemean/aid/region', { pid: uid })
            .then(function (response) {
                if (response.length > 0) {
                    _this.setState({
                        addressList: response
                    });
                    setTimeout(() => {
                        scrollViewRef.scrollTo({ x: 0, y: 0, animated: true });
                    }, 50);

                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }
    //选择地址列表
    SelectListAddress(item) {
        var addressVal = this.state.addressVal;
        var addressIndex = this.state.addressIndex;
        if (this.state.addressIndex === 0) {
            addressVal = [];
        } else {
            addressVal.splice(this.state.addressIndex, addressVal.length - 1);
        }
        addressVal.push(item);
        if (addressVal.length < this.props.length) {
            this.getRegion(item.objId);
            addressIndex++;
        }
        this.setState({
            addressVal: addressVal,
            addressIndex: addressIndex
        });
        this.props.change && this.props.change(addressVal);
    }
    //选择地址类型
    selectType(index) {
        var addressVal = this.state.addressVal;
        var len = addressVal.length;
        if (index == 0) {
            this.getRegion(0);
        } else {
            this.getRegion(addressVal[index - 1].objId);
        }
        this.setState({
            addressIndex: index
        });
    }
    render() {
        //选择的值
        var addressVal = this.state.addressVal.map((item, index) => (
             {
                this.selectType(index);
            }}>
                {item.name}
            
        ));
        //请选择操作
        var pleaseChoose = () => {
            var len = this.state.addressVal.length;
            if (len < this.props.length) {
                return ( {
                    this.selectType(len);
                }}>
                    请选择
                )
            } else {
                return undefined;
            }
        }
        return (
            
                
                    {addressVal}
                    {pleaseChoose()}
                
                
                     {
                        if (scrollView !== null) {
                            scrollViewRef = scrollView;
                        }
                    }}>
                        {
                            this.state.addressList.map((item, index) => {
                                return  {
                                    this.SelectListAddress(item);
                                }}>
                                     this.state.addressIndex && item.name === this.state.addressVal[this.state.addressIndex].name ? this.props.activeColor : "#333"
                                    }}>{item.name}
                                

                            })
                        }
                    
                
            
        );
    }
}
export default Address;
const styles = StyleSheet.create({
    AddressPage: {
        width: width,
        height: 300,
    },
    AddressItem: {
        paddingLeft: 5,
        paddingRight: 5,
        height: 40,
        lineHeight: 40,
        fontSize: 16
    },
    SelectItem: {
        paddingLeft: 15,
        paddingRight: 15,
        height: 40,
        lineHeight: 40
    }
});

使用方法

单独使用

import Address from '../../components/common/Address';

 {
   console.log(res);
}}>

和popup一起使用

popup教程：https://blog.csdn.net/weixin_40614372/article/details/86511492

import React, { Component } from 'react';
import { ScrollView, StyleSheet, Text, View, ActivityIndicator ,Button} from 'react-native';
import Popup from '../../components/common/Popup';
import Toast from '../../components/common/Toast';
import Address from '../../components/common/Address';
class AddressSelect extends Component {
    static navigationOptions = {
        title: '地址选择器',
    };
    constructor(props) {
        super(props);
    }
    open() {
        var address = [];
        Popup.show({
            title: "请选择地址",
            popupHeight:300,
            content: (
                
 {
                    address = res;
                }}>
            )
        }, (res) => {
                console.log(address);
                if (address.length < 3 ) {
                    Toast.add("请选择地址");
                } else {
                    Popup.hide();
                }
        });
    }
    render() {
        return (
            
                addressSelect
                
            
        );
    }
}
export default AddressSelect;
const styles = StyleSheet.create({
    pageStyle: {
        backgroundColor: '#f5f5f5',
    },
});

示例图

项目GitHub地址：https://github.com/zhouwei1994/nativeCase.git