react-native地址选择器

实现效果:

image.png

image.png

image.png

1.安装react-native-picker

npm i -S react-native-picker

2.react-native link

3.import Picker from "react-native-picker"

react-native-picker支持两种模式:

1.平行

单轮:

pickdrData = [1,2,3,4];
selectedValue = 3;

两个或更多:

pickdrData = [
  [1,2,3],
  [4,5,6],
  .....
];
selectedValue = [1,4];

2.级联:如日期选择器、地址选择器

两轮:

pickdrData = [
  {
    a:[1,2,3]
  },
  {
    b:[4,5,6]
  },
  .....
];
selectedValue = ["a",4];

三轮:

pickdrData = [
  {
    a:[
      {
        A1:[1,2,3]
      },
      {
        A2:[4,5,6]
      },
      {
        A3:[7,8,9]
      },
      ]
   },
   {
    b:[
      {
        B1:[11,12,13]
      },
      {
        B2:[14,15,16]
      },
      {
        B3:[17,18,19]
      },
      ]
   },

  .....
];
selectedValue = ["a","A2",16];

我的代码:

use strict';

import React, { Component } from 'react';

import Picker from 'react-native-picker';

import {

  View,

  Dimensions,

  Text,

  TouchableOpacity

} from 'react-native';

import Colors from "../../../constants/Colors";

import styled from "styled-components";

import { connect } from "react-redux";

const _Picker = null;

class AddressPicker extends Component {

constructor(props) {

  super(props);

  this.state = {

  val:this.props.title,

  data:[],

  };

}

//组件渲染前

    componentWillMount(){

    }

    //组件渲染后

    componentDidMount() {

    }

    //组件销毁

    componentWillUnmount(){

        // _Picker.hide();

    }

onPress(){

this.pickerType();

}

pickerType = () => {

provincialUrbanArea://省市区

this.provincialUrbanArea();

  }

    //省市区

    provincialUrbanArea = () => {

        // let jsonData = require('./area.json');

        let address = this.props.address.address;

        let data = address;

        this.pickerInit(data,['北京','北京','东城区'],'省市区');

    }

  render() {

  return (

      <View>

      <TouchableOpacity onPress={this.onPress.bind(this)}>

        <Text>{(this.state.val==null)? "选择" : this.state.val}</Text>

        </TouchableOpacity>

      </View>

    );

  }

  //组件初始化

    pickerInit = (data,selectedValue,title) => {

        Picker.init({

            pickerData:data,

            selectedValue: [],

            pickerTitleText:title,

            pickerConfirmBtnText:'确定',

            pickerCancelBtnText:'取消',

            //确定

            onPickerConfirm: data => {

                (this.props.type)

                provincialUrbanArea : data = data.join(' ');

                

                this.setState({

                        val:data

                });

                /*this.props.cback(data);*/

            },

            //取消

            onPickerCancel: data => {

                console.log(data);

            },

            //选择

            onPickerSelect: data => {

                console.log(data);

            }

        });

        _Picker = Picker;

        _Picker.show();

    }

}

export default connect(store => store)(AddressPicker);

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容