###The React-Native-Picker react native Picker component for both Android and iOS.

###Attention

• This project has already transfered to react-native-picker-xg, and will not update.
• For more about this project ,see react-native-picker in the github. ###The environment
• node v6.1.0
• npm v3.9.3
• react v15.0.2
• react-native v0.26.2

Main

• The drawing of the wheel of the android come from react-native-picker-android.
• For the iOS, using PickerIOS as the basic.

How to install

npm install react-native-tpicker --save

Example

Two ways:

• the first one

react-native init pubtest
npm install react-native-tpicker --save  

change the index.android.js or the index.ios.js into:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/

import React, { Component } from 'react';
import {
 AppRegistry,
 View,
 Text,
 StyleSheet,
 Platform,
 PickerIOS,
 TouchableOpacity,
 TextInput,
 TouchableHighlight
} from 'react-native';
import {Cpicker,Tpicker} from 'react-native-tpicker';


let wheel2 = [
 {
   amc: {
     name: '2011年',
   },
   alfa: {
     name: '2012年',
   },
   aston: {
     name: '2013年',
   },
   audi: {
     name: '2014年',
   },
   austin: {
     name: '2015年',
   },
   borgward: {
     name: '2016年',
   },
   buick: {
     name: '2017年',
   },
   cadillac: {
     name: '2018年',
   },
   chevrolet: {
     name: '2019年',
   },
 },
 {
   amc1: {
     name: '1月',
   },
   alfa1: {
     name: '2月',
   },
   aston1: {
     name: '3月',
   },
   audi1: {
     name: '4月',
   },
 },
]
let wheel3 = [
 {
   amc: {
     name: '2011年',
   },
   alfa: {
     name: '2012年',
   },
   aston: {
     name: '2013年',
   },
   audi: {
     name: '2014年',
   },
   austin: {
     name: '2015年',
   },
   borgward: {
     name: '2016年',
   },
   buick: {
     name: '2017年',
   },
   cadillac: {
     name: '2018年',
   },
   chevrolet: {
     name: '2019年',
   },
 },
 {
   amc1: {
     name: '1月',
   },
   alfa1: {
     name: '2月',
   },
   aston1: {
     name: '3月',
   },
   audi1: {
     name: '4月',
   },
 },
 {
   cadillac2: {
     name: '1号',
   },
   chevrolet2: {
     name: '2号',
   },
 }

];

let level3Data =
{
 "四川":{
   "成都":["青羊区","武侯区","温江区"],
   "绵阳":["绵阳中学","核弹基地"],
   "广安":["容县","武胜"]
 },
 "浙江":{
   "杭州":["西湖","银泰","玉泉"],
   "绍兴":["X1","X2","X3"],
   "place":["Y1","Y2","Y3","Y4","Y5"],
 },
 "some":{
   "place1":["Z1","Z2","Z3"],
   "place2":["Z4","Z5","Z6","Z7"],
   "place3":["A1","A2","A3","A4","A5","A6"],
 }
}
let level2Data = {
 "四川":["w","e","q"],
 "浙江":["ww","ee","qq"],
}
let level4Data={
 "1":{
   "11":{
     "10":['a1','b1','c1'],
     "01":['d1','f1'],
   },
   "22":{
     "20":['w','d','qq'],
     '21':['wp','c'],
   },
 },
 "2":{
   "33":{
     "34":['e','qd','cd'],
     "56":['dw','vf','we'],
   },
   "09":{
     "v":['bb','t','bd'],
     'p':['vd','der','f'],
   }
 }
}

class TpickerEx extends Component {
 constructor(props, context){
   super(props, context);
   this.state = {
     str:"just a test",
     str1: "just a test",
   }
 }


 render() {
   return (
     <View style={testStyle.container}>
       <Text style={{margin:10}}>{this.state.str}</Text>
       <Cpicker
         inputValue={"4 level picker"}
         level = {4}
         selectIndex = {[0,1,1,0]}
         data = {level4Data}
         visible = {false}
         transparent = {true}
         onResult = {(str)=>{
                               this.setState({str:str});

                               }}
       >
       </Cpicker>
       <Cpicker
         inputValue={"3 level picker"}
         level = {3}
         selectIndex = {[0,1,0]}
         data = {level3Data}
         visible = {false}
         transparent = {true}
       >
       </Cpicker>
       <Cpicker
         inputValue={"2 level picker"}
         level = {2}
         selectIndex = {[0,1]}
         data = {level2Data}
         visible = {false}
         transparent = {true}
       >
       </Cpicker>
       <Tpicker
         inputValue ={"3 wheel picker"}
         inputStyle = {testStyle.textInput}
         confirmBtnText = {"confirm"}
         cancelBtnText = {"cancel"}
         data = {wheel3}
         selectIndex = {[0,2,1]}
         visible = {false}
         transparent = {true}
       >
       </Tpicker>
       <Tpicker
         inputValue ={"2 wheel picker"}
         inputStyle = {testStyle.textInput}
         confirmBtnText = {"confirm"}
         cancelBtnText = {"cancel"}
         data = {wheel2}
         selectIndex = {[0,2]}
         onResult ={(str) => {
                 this.setState({str1:str});
                 }}
         visible = {false}
         transparent = {true}
       >
       </Tpicker>
       <Text style={{margin:10}}>{this.state.str1}</Text>
     </View>

   );
 }
}

const testStyle = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'stretch',
 },

})
AppRegistry.registerComponent('pubtest', () => TpickerEx);

• the second one(in this way, please make sure the version of the react matches the need of the react-native)
  • download the zip from the github

  npm install react --save
  npm install react-native --save
  npm install react-native-vector-icons --save
      

  • the example has already in the index.android.js and index.ios.js

Properties

• selectIndex: [number] ,initial selected item
• selfStyle: CSS-layout, the innerContainer's style
• inputStyle: CSS-layout, the textInput's style
• confirmBtnText: string, the text of the confirm button
• cancelBtnText: string, the text of the cancel button
• confirmBtnStyle: CSS-layout, the confirm button's style
• cancelBtnStyle: CSS-layout, the cancel button;s style
• enable: bool, to enable or disable the textInput
• inputValue: string, the initial text of the textInput

###Method

• onResult: function, to expose the result you chose.

###Data structure Basicly, you can realize as more as wheels as you like if you follow the data structure we set for you. However, take the size of the phone into consideration, we do not recommend more than 4 wheels.

• For the basic pickers: It's an array, the count of the wheel depends on how many objects you have. And the content of the wheel depends on the name of one objects of the outer objects.

let wheel2 = [
  {
    amc: {
      name: '2011年',
    },
    alfa: {
      name: '2012年',
    },
    aston: {
      name: '2013年',
    },
    audi: {
      name: '2014年',
    },
    austin: {
      name: '2015年',
    },
    borgward: {
      name: '2016年',
    },
    buick: {
      name: '2017年',
    },
    cadillac: {
      name: '2018年',
    },
    chevrolet: {
      name: '2019年',
    },
  },
  {
    amc1: {
      name: '1月',
    },
    alfa1: {
      name: '2月',
    },
    aston1: {
      name: '3月',
    },
    audi1: {
      name: '4月',
    },
  },
]

• For the cascade wheels: It'a an object in total, and the keys of one object become the content of the wheel. The last wheel's content is an array.

let level3Data =
{
  "四川":{
    "成都":["青羊区","武侯区","温江区"],
    "绵阳":["绵阳中学","核弹基地"],
    "广安":["容县","武胜"]
  },
  "浙江":{
    "杭州":["西湖","银泰","玉泉"],
    "绍兴":["X1","X2","X3"],
    "place":["Y1","Y2","Y3","Y4","Y5"],
  },
  "some":{
    "place1":["Z1","Z2","Z3"],
    "place2":["Z4","Z5","Z6","Z7"],
    "place3":["A1","A2","A3","A4","A5","A6"],
  }
}

• For more information, you can see the examples.