react-native-data-picker

react native data picker

Documentation

Params

|Key | Description | Type | Default| | --- | ----------- | ---- | ------ | |pickerData | |array | | |selectedValue | |string | | |onPickerEvent | |function| |

Methods

|Name | Description | Type | Default| | --- | ----------- | ---- | ------ | |init |init and pass parameters to picker | | | |destroy |destroy picker | | | |show |show picker | | |

Usage

Step 1 - install

	npm install react-native-data-picker --save

Step 2 - link

	react-native link

Step 3 - import and use in project

    import React, { Component } from "react";
    import { StyleSheet, Text, View } from "react-native";
    import Picker from 'react-native-data-picker';

    export default class Demo extends Component {
      componentWillMount() {

        // remote

        // Api.post("user/findAllAreas", {})
        //   .then(function(response) {
        //     console.log(response);
        //     Picker.init({
        //       pickerData: JSON.stringify(response.data.data),
        //       selectedValue: '',
        //       onPickerEvent: data => console.log(data),
        //     });
        //   })
        //   .catch(function(error) {
        //     console.log(error);
        //   });

        // native

        let data = [];

        let testData1 = [
          { parentId: 0, areaId: 2, areaName: "北京市" },
          { parentId: 2, areaId: 33, areaName: "市辖区" },
          { parentId: 33, areaId: 378, areaName: "东城区" },
          { parentId: 378, areaId: 1133, areaName: "东城街" }
        ];

        let testData2 = [
          { areaId: 3, areaName: "天津市", parentId: 0 },
          { areaId: 36, areaName: "县", parentId: 3 },
          { areaId: 412, areaName: "静海县", parentId: 36 }
        ];

        let previouslySelectedValue = [
          { id: "3", name: "天津市", pid: "0" },
          { id: "36", name: "县", pid: "3" },
          { id: "412", name: "静海县", pid: "36" }
        ];

        data = data.concat(testData1).concat(testData2);

        Picker.init({
          pickerData: JSON.stringify(data),
          selectedValue: JSON.stringify(previouslySelectedValue),
          onPickerEvent: data => console.log(data)
        });
      }

      componentWillUnmount() {
        Picker.destroy();
      }

      render() {
          return (
            <View>
              <Text onPress={() => Picker.show()}>
                selectedArea
              </Text>
            </View>
          );
      }
    }

Notice

support one modes:

   pickerData = [
      { parentId: 0, areaId: 2, areaName: "北京市" },
      { parentId: 2, areaId: 33, areaName: "市辖区" },
      { parentId: 33, areaId: 378, areaName: "东城区" },
      { parentId: 378, areaId: 1133, areaName: "东城街" }
    ];

   selectedValue = [
      { id: "3", name: "天津市", pid: "0" },
      { id: "36", name: "县", pid: "3" },
      { id: "412", name: "静海县", pid: "36" }
    ];