fix(SelectCascader): update native Pick

Author: xingyuefeng

components/SelectCascader/README.md

@@ -134,3 +134,4 @@ export default class SelectCascaderDemo extends Component {
 | `dismissText` | 取消button文字 | string | 取消  |
 | `title` | 弹框标题 | string | 请选择  |
 | `pickerItemStyle` | 选择器样式 | object | -  |
+| `headerStyle` | 选择器头部样式 | object | -  |

components/SelectCascader/index.tsx

@@ -2,12 +2,13 @@ import {
   View,
   Text,
   StyleSheet,
-  Picker,
   TouchableHighlight,
   StyleProp,
   TextStyle,
+  ViewStyle
 } from 'react-native';
 import React, {Component} from 'react';
+import {Picker} from '@react-native-community/picker';
 import arrayTreeFilter from '../utils/arrayTreeFilter';
 import Modal from '../Modal';
 import {colors} from '../utils';
@@ -36,6 +37,7 @@ export interface ISelectCascaderProps {
   disabled?: boolean;
   cols?: number;
   pickerItemStyle?: StyleProp<TextStyle>;
+  headerStyle?: StyleProp<ViewStyle>;
 }
 
 export interface Istate {
@@ -179,32 +181,28 @@ export default class SelectCascader extends Component<
   };
 
   render() {
-    const {title, dismissText, okText, onDismiss} = this.props;
+    const {title, dismissText, okText, onDismiss, headerStyle} = this.props;
     const cols = this.getCols();
     return (
       <Modal
         visible={this.state.modalVisible}
         onClosed={() => {
           this.setState({modalVisible: false});
         }}>
-        <View style={[styles.header]}>
-          <TouchableHighlight
-            onPress={onDismiss}
-            style={[styles.headerItem]}
-            underlayColor={colors.blue}>
+        <>
+        <View style={[styles.header, headerStyle]}>
+          <TouchableHighlight onPress={onDismiss} style={[styles.headerItem]}>
             <Text>{dismissText}</Text>
           </TouchableHighlight>
           <View style={[styles.headerItem]}>
             <Text>{title}</Text>
           </View>
-          <TouchableHighlight
-            onPress={this.onOk}
-            style={[styles.headerItem]}
-            underlayColor={colors.blue}>
+          <TouchableHighlight onPress={this.onOk} style={[styles.headerItem]}>
             <Text>{okText}</Text>
           </TouchableHighlight>
         </View>
         <View style={styles.list}>{cols}</View>
+        </>
       </Modal>
     );
   }

ios/Podfile.lock

@@ -300,6 +300,8 @@ PODS:
     - React-jsi (= 0.63.2)
   - RNCMaskedView (0.1.10):
     - React
+  - RNCPicker (1.6.6):
+    - React
   - RNGestureHandler (1.6.1):
     - React
   - RNScreens (2.7.0):
@@ -359,6 +361,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
+  - "RNCPicker (from `../node_modules/@react-native-community/picker`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
@@ -434,6 +437,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
+  RNCPicker:
+    :path: "../node_modules/@react-native-community/picker"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNScreens:
@@ -447,7 +452,7 @@ SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   CocoaAsyncSocket: 694058e7c0ed05a9e217d1b3c7ded962f4180845
   CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f
-  DoubleConversion: cde416483dac037923206447da6e1454df403714
+  DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
   FBLazyVector: 3ef4a7f62e7db01092f9d517d2ebc0d0677c4a37
   FBReactNativeSpec: dc7fa9088f0f2a998503a352b0554d69a4391c5a
   Flipper: 33585e2d9810fe5528346be33bcf71b37bb7ae13
@@ -458,7 +463,7 @@ SPEC CHECKSUMS:
   Flipper-RSocket: 64e7431a55835eb953b0bf984ef3b90ae9fdddd7
   FlipperKit: bc68102cd4952a258a23c9c1b316c7bec1fecf83
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
+  glog: 1f3da668190260b06b429bb211bfbee5cd790c28
   OpenSSL-Universal: 8b48cc0d10c1b2923617dfe5c178aa9ed2689355
   RCTRequired: f13f25e7b12f925f1f6a6a8c69d929a03c0129fe
   RCTTypeSafety: 44982c5c8e43ff4141eb519a8ddc88059acd1f3a
@@ -482,6 +487,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 4d2e726957f4087449739b595f107c0d4b6c2d2d
   ReactCommon: a0a1edbebcac5e91338371b72ffc66aa822792ce
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
+  RNCPicker: 494015f2b7ec4bee5484b6f235aa19691426dcdb
   RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
   RNScreens: cf198f915f8a2bf163de94ca9f5bfc8d326c3706
   RNSVG: f6177f8d7c095fada7cfee2e4bb7388ba426064c
@@ -490,4 +496,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 0b6254ae3e2dab196087d7097c0ef34d190527b5
 
-COCOAPODS: 1.9.1
+COCOAPODS: 1.9.3

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.5",
+    "@react-native-community/picker": "^1.6.6",
     "@types/color": "3.0.1",
     "@types/react-native": "^0.63.2",
     "@uiw/icons": "2.4.3",