Updated to prop-types for React 16

app/pickerHandle/handle.js

@@ -1,7 +1,7 @@
 /**
  * 依赖引用
  */
-import React, {Component,PropTypes} from 'react';
+import React, {Component} from 'react';
 import {
     View,
     Text,
@@ -16,6 +16,7 @@ import {
     Modal,
     Image,
 } from 'react-native';
+import PropTypes from 'prop-types';
 import styles from './handleStyle';
 
 
@@ -56,20 +57,20 @@ class Handle extends Component {
   render(){
     return (
           <View style={[styles.nav, this.props.navStyle]}>
-            <TouchableOpacity  style={styles.confirm} onPress={() => {this.props.confirmChose();}}>
-              <Text className={'confirm'}
-                    style={[styles.confirmBtnStyle,this.props.confirmBtnStyle]} >{this.props.confirmBtnText}</Text>
-            </TouchableOpacity>
-            <View style={styles.pickerNameContainer}>
-              <Text style={[styles.pickerName,this.props.pickerNameStyle]}>{this.props.pickerName}</Text>
-            </View>
             <TouchableOpacity style={styles.cancel} onPress={() => {this.props.cancelChose(false, 'cancel');
             }}>
               <Text
                 className={'cancel'}
                 style={[styles.cancelBtnStyle,this.props.cancelBtnStyle]}
               >{this.props.cancelBtnText}</Text>
             </TouchableOpacity>
+            <View style={styles.pickerNameContainer}>
+              <Text style={[styles.pickerName,this.props.pickerNameStyle]}>{this.props.pickerName}</Text>
+            </View>
+            <TouchableOpacity  style={styles.confirm} onPress={() => {this.props.confirmChose();}}>
+              <Text className={'confirm'}
+                    style={[styles.confirmBtnStyle,this.props.confirmBtnStyle]} >{this.props.confirmBtnText}</Text>
+            </TouchableOpacity>
           </View>
     );
   }}

app/pickerHandle/handleStyle.js

@@ -16,7 +16,7 @@ let styles = StyleSheet.create({
     justifyContent: 'center'
   },
   confirmBtnStyle:{
-    textAlign:'left',
+    textAlign:'right',
     paddingLeft:20,
     paddingRight:20,
     fontSize: 18
@@ -35,7 +35,7 @@ let styles = StyleSheet.create({
     alignItems: 'center'
   },
   cancelBtnStyle: {
-    textAlign:'right',
+    textAlign:'left',
     paddingLeft:20,
     paddingRight:20,
     fontSize: 18

app/pickerLogic/basicPicker.js

@@ -1,9 +1,10 @@
 /**
  * 依赖引用
  */
-import React, {Component,PropTypes} from 'react';
+import React, {Component} from 'react';
 import {
     View,
+    ViewPropTypes,
     Text,
     Dimensions,
     Animated,
@@ -13,6 +14,7 @@ import {
     Modal,
     Image,
 } from 'react-native';
+import PropTypes from 'prop-types';
 import Pickroll from './basicRoll';
 import {styles} from './pickerStyle';
 import InputOuter from '../pickerTrigger/outer';
@@ -49,13 +51,13 @@ class BasicPicker extends Component {
     //确认按钮样式
     confirmBtnStyle: Text.propTypes.style,
     //输入框样式
-    inputStyle: View.propTypes.style,
+    inputStyle: ViewPropTypes.style,
     //滚轮头部样式
-    navStyle: View.propTypes.style,
+    navStyle: ViewPropTypes.style,
     //输入框内部字体样式
     textStyle: Text.propTypes.style,
     //右边下拉按钮的样式
-    iconStyle: View.propTypes.style,
+    iconStyle: ViewPropTypes.style,
     //picker的名称
     pickerName: PropTypes.string,
     //输入框内部文字初始值
@@ -73,7 +75,9 @@ class BasicPicker extends Component {
     //icon name
     iconName: PropTypes.string,
     //icon size
-    iconSize: PropTypes.number
+    iconSize: PropTypes.number,
+    //icon source
+    iconSource: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
   };
 
   /**
@@ -125,7 +129,8 @@ class BasicPicker extends Component {
      */
   _confirmChose(){
     this.props.data.map((item,index) =>{
-      this.str = this.str +  this.props.data[index][this.select.selectedValue[index]].name;
+      const keys = Object.keys(this.props.data[index]);
+      this.str = this.str + keys[keys.indexOf(this.select.selectedValue[0])];
     });
     this. _setModalVisible(false,'confirm');
     return this.str;
@@ -245,7 +250,8 @@ class BasicPicker extends Component {
                             <PickerItem
                               key={carMake}
                               value={carMake}
-                              label={this.props.data[index][carMake].name}
+                              label={typeof this.props.data[index][carMake].name === 'function'
+                                ? this.props.data[index][carMake].name() : this.props.data[index][carMake].name}
                             />
                           )))
                       }
@@ -263,6 +269,7 @@ class BasicPicker extends Component {
           iconName={this.props.iconName}
           onPress={this._setEventBegin}
           iconStyle={this.props.iconStyle}
+          iconSource={this.props.iconSource}
           enable={this.props.enable}
           placeholder={this.props.inputValue}/>
       </View>
@@ -274,7 +281,7 @@ BasicPicker.defaultProps = {
   visible: false,
   enable: true,
   inputValue: 'please chose',
-  confirmBtnText: '确定',
-  cancelBtnText: '取消'
+  confirmBtnText: 'Done',
+  cancelBtnText: 'Cancel'
 };
 export default BasicPicker;

app/pickerLogic/basicRoll.js

@@ -1,13 +1,15 @@
 /**
  * 依赖引入
  */
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
 import {
     View,
+    ViewPropTypes,
     Text,
     Animated,
     ScrollView
 } from 'react-native';
+import PropTypes from 'prop-types';
 import {rollStyles} from './pickerStyle';
 
 /**
@@ -29,7 +31,7 @@ class Pickroll extends Component {
     //选择的值的位置
     selectIndex: PropTypes.number,
     //整个picker的样式
-    pickerStyle: View.propTypes.style,
+    pickerStyle: ViewPropTypes.style,
     //单轮每个格子的样式
     itemAndroidStyle: Text.propTypes.style
   };
@@ -46,7 +48,7 @@ class Pickroll extends Component {
   /**
    * 状态初始化
    * @param props {object} 继承的属性
-   * @returns {{selectedIndex: number, items: Array, pickerStyle:View.propTypes.style, itemStyle:View.propTypes.style, onValueChange: func}}
+   * @returns {{selectedIndex: number, items: Array, pickerStyle: ViewPropTypes.style, itemStyle: View.propTypes.style, onValueChange: func}}
    * @private
      */
 
@@ -187,7 +189,7 @@ class Pickroll extends Component {
     this.items = [];
     Object.keys(this.props.data).map((child,index) =>{
       child === this.props.selectedValue && (this.selectedIndex = index);
-      this.items.push({value: child, label: this.props.data[child].name});
+      this.items.push({value: child, label: typeof this.props.data[child].name === 'function' ? this.props.data[child].name() : this.props.data[child].name});
     });
     this.moveDy = 0;
     this.fingerLeft = false;

app/pickerLogic/cascadePicker.js

@@ -1,9 +1,10 @@
 /**
  * 依赖引用
  */
-import React, { Component,  PropTypes} from 'react';
+import React, { Component} from 'react';
 import {
   View,
+  ViewPropTypes,
   Text,
   Dimensions,
   Animated,
@@ -14,6 +15,7 @@ import {
   ActivityIndicator,
   Image
 } from 'react-native';
+import PropTypes from 'prop-types';
 import Pickroll from './cascadeRoll';
 import {styles} from './pickerStyle';
 import InputOuter from '../pickerTrigger/outer';
@@ -50,13 +52,13 @@ class CascadePicker extends Component {
     //确认按钮样式
     confirmBtnStyle: Text.propTypes.style,
     //输入框样式
-    inputStyle: View.propTypes.style,
+    inputStyle: ViewPropTypes.style,
     //滚轮头部样式
-    navStyle: View.propTypes.style,
+    navStyle: ViewPropTypes.style,
     //输入框内部字体样式
     textStyle: Text.propTypes.style,
     //右边下拉按钮的样式
-    iconStyle: View.propTypes.style,
+    iconStyle: ViewPropTypes.style,
     //picker的名称
     pickerName: PropTypes.string,
     //输入框内部文字初始值

app/pickerLogic/cascadeRoll.js

@@ -1,13 +1,15 @@
 /**
  * 依赖引入
  */
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
 import {
     View,
+    ViewPropTypes,
     Text,
     Animated,
     ScrollView
 } from 'react-native';
+import PropTypes from 'prop-types';
 import {rollStyles} from './pickerStyle';
 
 /**
@@ -29,7 +31,7 @@ class Pickroll extends Component {
     //选择的值的位置
     selectIndex: PropTypes.number,
     //整个picker的样式
-    pickerStyle: View.propTypes.style,
+    pickerStyle: ViewPropTypes,
     //单轮每个格子的样式
     itemAndroidStyle: Text.propTypes.style
   };

app/pickerTrigger/outer.js

@@ -1,7 +1,7 @@
 /**
  * 依赖引用
  */
-import React, {Component,PropTypes} from 'react';
+import React, {Component} from 'react';
 import {
     View,
     Text,
@@ -16,8 +16,8 @@ import {
     Modal,
     Image,
 } from 'react-native';
+import PropTypes from 'prop-types';
 import styles from './outerStyle';
-import Icon from 'react-native-vector-icons/Entypo';
 
 
 /**
@@ -31,7 +31,8 @@ class InputOuter extends Component {
      */
   static propTypes = {
     //传递的数据
-    data: PropTypes.array
+    data: PropTypes.array,
+    iconSource: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
   };
 
   /**
@@ -52,15 +53,20 @@ class InputOuter extends Component {
   render(){
     return (
           <TouchableWithoutFeedback style={[styles.outerInput, !this.props.enable && {backgroundColor: '#888'}, this.props.inputStyle]} onPress={() => {this.props.onPress();}}>
-            <View style={[styles.outerInput, !this.props.enable && {backgroundColor: '#ccc'}, this.props.inputStyle]}>
+            <View style={[styles.outerInput, !this.props.enable && {backgroundColor: '#ccc'}, this.props.inputStyle, {marginLeft: 0}]}>
               <View style={[styles.textInput]}
-                style = {[styles.textInput]}
                 placeholder={this.props.placeholder}
               >
                 <Text style={[styles.inputLabel, this.props.textStyle]}>{this.props.placeholder}</Text>
               </View>
-              <Icon name={this.props.iconName ? this.props.iconName : 'calendar'} size={this.props.iconSize ? this.props.iconSize : 18} color="#666" style={[styles.vectorIcon, this.props.iconStyle]}/>
-              {/*<Image source={require('../img/arrow.png')} style={[styles.icon, this.props.iconStyle]}/>    */}
+              {this.props.iconSource ?
+                <Image
+                  style={[styles.icon, this.props.iconStyle]}
+                  source={this.props.iconSource}
+                />
+                :
+                null
+              }
             </View>
            </TouchableWithoutFeedback>
     );

app/pickerTrigger/outerStyle.js

@@ -21,7 +21,6 @@ let styles = StyleSheet.create({
     justifyContent: 'center',
     height: 40,
     backgroundColor: '#fff',
-    borderRadius: 3
   },
   textInput:{
     flex: 1,

package.json

@@ -22,6 +22,7 @@
     "coverage": "cat ./coverage/lcov.info | coveralls"
   },
   "dependencies": {
+    "prop-types": "^15.6.0",
     "react-native-vector-icons": "^4.0.0"
   },
   "peerDependencies": {