@react-native-hero/picker 0.1.0 → 0.1.1

package/README.md

@@ -44,6 +44,7 @@ import {
 } from '@react-native-hero/picker'
 
 <Picker
+  height={300}
   options={[
     { text: 'displayed text', value: 'support string or number' },
     { text: '2', value: 'string' },
@@ -54,7 +55,6 @@ import {
     data.option
   }}
   style={{
-    flex: 1,
     backgroundColor: '#eee'
   }}
 

package/android/src/main/java/com/github/reactnativehero/picker/PickerView.kt

@@ -25,7 +25,7 @@ class PickerView(private val reactContext: ThemedReactContext) : WheelView(react
             val stringList = arrayListOf<String>()
 
             for (i in 0 until value.size()) {
-                val map = value.getMap(i)!!
+                val map = value.getMap(i)
                 var text = "undefined"
                 if (map.hasKey("text")) {
                     text = map.getString("text") as String
@@ -109,8 +109,17 @@ class PickerView(private val reactContext: ThemedReactContext) : WheelView(react
             setLineSpacingMultiplier(rowHeight / fontSize)
         }
 
+    var visibleCount = 6
+
+        set(value) {
+            field = value
+
+            setItemsVisibleCount(visibleCount)
+        }
+
     init {
         setCyclic(false)
+        setAlphaGradient(true)
         setDividerColor(dividerColor)
         setOnItemSelectedListener {
             selectedIndex = it

package/android/src/main/java/com/github/reactnativehero/picker/RNTPickerManager.kt

@@ -42,6 +42,11 @@ class RNTPickerManager(private val reactAppContext: ReactApplicationContext) : S
         view.rowHeight = rowHeight
     }
 
+    @ReactProp(name = "visibleCount")
+    fun setVisibleCount(view: PickerView, visibleCount: Int) {
+        view.visibleCount = visibleCount
+    }
+
     override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any> {
         return MapBuilder.builder<String, Any>()
                 .put("onChange", MapBuilder.of("phasedRegistrationNames", MapBuilder.of("bubbled", "onChange")))

package/index.js

@@ -3,11 +3,14 @@ import React, {
 } from 'react'
 
 import {
+  Platform,
   requireNativeComponent,
 } from 'react-native'
 
 import PropTypes from 'prop-types'
 
+const isAndroid = Platform.OS === 'android'
+
 class PickerComponent extends PureComponent {
 
   static propTypes = {
@@ -17,6 +20,7 @@ class PickerComponent extends PureComponent {
       })
     ).isRequired,
     selectedIndex: PropTypes.number,
+    height: PropTypes.number.isRequired,
     color: PropTypes.string,
     fontSize: PropTypes.number,
     rowHeight: PropTypes.number,
@@ -32,16 +36,41 @@ class PickerComponent extends PureComponent {
   }
 
   handleChange = event => {
-    let { onChange } = this.props
+    const { onChange } = this.props
     if (onChange) {
       onChange(event.nativeEvent)
     }
   }
 
   render() {
+    const {
+      height,
+      rowHeight,
+      style,
+      ...props
+    } = this.props
+
+    const pickerStyle = {
+      flex: 1,
+      height,
+    }
+    // 安卓 picker 没有垂直居中
+    // 这里支持简单处理，稍微接近 ios 的效果
+    if (isAndroid) {
+      const gap = Math.floor(height / 100) * 20
+      pickerStyle.height -= 2 * gap
+      pickerStyle.marginVertical = gap
+    }
     return (
       <RNTPicker
-        {...this.props}
+        {...props}
+        style={
+          style
+          ? [pickerStyle, style]
+          : pickerStyle
+        }
+        rowHeight={rowHeight}
+        visibleCount={Math.ceil(height / rowHeight)}
         onChange={this.handleChange}
       />
     )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-hero/picker",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "react native picker",
   "main": "index.js",
   "scripts": {