优化 android 像素单位处理

qiuxiang · Dec 23, 2017 · 675efab · 675efab
1 parent 05b9a73
commit 675efab
Show file tree

Hide file tree

Showing 14 changed files with 41 additions and 82 deletions.
diff --git a/android/build.gradle b/android/build.gradle
@@ -2,7 +2,7 @@ apply plugin: 'com.android.library'
 apply plugin: 'kotlin-android'
 
 buildscript {
-    ext.kotlin_version = '1.1.51'
+    ext.kotlin_version = '1.2.0'
 
     repositories {
         jcenter()

diff --git a/android/src/main/java/cn/qiuxiang/react/amap3d/AMapUtilsModule.kt b/android/src/main/java/cn/qiuxiang/react/amap3d/AMapUtilsModule.kt
@@ -20,5 +20,5 @@ class AMapUtilsModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
     }
 }
 
-val Int.toPx: Int
+val Float.toPx: Int
     get() = (this * Resources.getSystem().displayMetrics.density).toInt()
diff --git a/android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapCircleManager.kt b/android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapCircleManager.kt
@@ -1,5 +1,6 @@
 package cn.qiuxiang.react.amap3d.maps
 
+import cn.qiuxiang.react.amap3d.toPx
 import com.amap.api.maps.model.LatLng
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.SimpleViewManager
@@ -40,7 +41,7 @@ internal class AMapCircleManager : SimpleViewManager<AMapCircle>() {
 
     @ReactProp(name = "strokeWidth")
     fun setStrokeWidth(circle: AMapCircle, strokeWidth: Float) {
-        circle.strokeWidth = strokeWidth
+        circle.strokeWidth = strokeWidth.toPx.toFloat()
     }
 
     @ReactProp(name = "zIndex")

diff --git a/android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapMarker.kt b/android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapMarker.kt
@@ -162,8 +162,8 @@ class AMapMarker(context: Context) : ReactViewGroup(context), AMapOverlay {
 
     fun lockToScreen(args: ReadableArray?) {
         if (args != null) {
-            val x = args.getInt(0).toPx
-            val y = args.getInt(1).toPx
+            val x = args.getDouble(0).toFloat().toPx
+            val y = args.getDouble(1).toFloat().toPx
             marker?.setPositionByPixels(x, y)
         }
     }

diff --git a/android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapPolygonManager.kt b/android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapPolygonManager.kt
@@ -1,5 +1,6 @@
 package cn.qiuxiang.react.amap3d.maps
 
+import cn.qiuxiang.react.amap3d.toPx
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
@@ -32,11 +33,11 @@ internal class AMapPolygonManager : SimpleViewManager<AMapPolygon>() {
 
     @ReactProp(name = "strokeWidth")
     fun setStrokeWidth(polygon: AMapPolygon, strokeWidth: Float) {
-        polygon.strokeWidth = strokeWidth
+        polygon.strokeWidth = strokeWidth.toPx.toFloat()
     }
 
     @ReactProp(name = "zIndex")
-    fun setZIndex_(polygon: AMapPolygon, zIndex: Float) {
+    fun setZindex(polygon: AMapPolygon, zIndex: Float) {
         polygon.zIndex = zIndex
     }
 }
diff --git a/android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapPolylineManager.kt b/android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapPolylineManager.kt
@@ -1,5 +1,6 @@
 package cn.qiuxiang.react.amap3d.maps
 
+import cn.qiuxiang.react.amap3d.toPx
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
@@ -36,7 +37,7 @@ internal class AMapPolylineManager : SimpleViewManager<AMapPolyline>() {
 
     @ReactProp(name = "width")
     fun setWidth(polyline: AMapPolyline, width: Float) {
-        polyline.width = width
+        polyline.width = width.toPx.toFloat()
     }
 
     @ReactProp(name = "zIndex")

diff --git a/example/src/examples.js b/example/src/examples.js
@@ -43,8 +43,6 @@ export default class Examples extends Component {
         {this._renderItem('动画移动', 'Animated')}
         <View style={styles.separator}/>
         {this._renderItem('地图事件', 'Events')}
-        <View style={styles.separator}/>
-        {this._renderItem('离线地图', 'Offline')}
       </View>
       <View style={styles.group}>
         {this._renderItem('添加标记', 'Marker')}
@@ -61,6 +59,8 @@ export default class Examples extends Component {
       </View>
       <View style={styles.group}>
         {this._renderItem('导航', 'Navigation')}
+        <View style={styles.separator}/>
+        {this._renderItem('离线地图', 'Offline')}
       </View>
     </ScrollView>
   }

diff --git a/src/maps/Circle.js b/src/maps/Circle.js
@@ -1,10 +1,9 @@
-import React, {PureComponent} from 'react'
 import PropTypes from 'prop-types'
-import {PixelRatio, Platform, requireNativeComponent, ViewPropTypes} from 'react-native'
+import {ColorPropType, requireNativeComponent, ViewPropTypes} from 'react-native'
 import {LatLng} from '../PropTypes'
 
-export default class Circle extends PureComponent {
-  static propTypes = {
+export default requireNativeComponent('AMapCircle', {
+  propTypes: {
     ...ViewPropTypes,
 
     /**
@@ -25,30 +24,16 @@ export default class Circle extends PureComponent {
     /**
      * 边线颜色
      */
-    strokeColor: PropTypes.string,
+    strokeColor: ColorPropType,
 
     /**
      * 填充颜色
      */
-    fillColor: PropTypes.string,
+    fillColor: ColorPropType,
 
     /**
      * 层级
      */
     zIndex: PropTypes.number,
-  }
-
-  render() {
-    const props = {
-      ...this.props,
-      ...Platform.select({
-        android: {
-          strokeWidth: PixelRatio.getPixelSizeForLayoutSize(this.props.strokeWidth),
-        },
-      }),
-    }
-    return <AMapCircle {...props}/>
-  }
-}
-
-const AMapCircle = requireNativeComponent('AMapCircle', Circle)
+  },
+})
diff --git a/src/maps/HeatMap.js b/src/maps/HeatMap.js
@@ -1,13 +1,12 @@
-import React, {PureComponent} from 'react'
 import PropTypes from 'prop-types'
-import {PixelRatio, Platform, requireNativeComponent, ViewPropTypes} from 'react-native'
+import {requireNativeComponent, ViewPropTypes} from 'react-native'
 import {LatLng} from '../PropTypes'
 
 /**
  * 注意，热力图组件的 props 设置过一次之后便不能再更改
  */
-export default class HeatMap extends PureComponent {
-  static propTypes = {
+export default requireNativeComponent('AMapHeatMap', {
+  propTypes: {
     ...ViewPropTypes,
 
     /**
@@ -24,11 +23,5 @@ export default class HeatMap extends PureComponent {
      * 透明度
      */
     opacity: PropTypes.number,
-  }
-
-  render() {
-    return <AMapHeatMap {...this.props}/>
-  }
-}
-
-const AMapHeatMap = requireNativeComponent('AMapHeatMap', HeatMap)
+  },
+})
diff --git a/src/maps/InfoWindow.js b/src/maps/InfoWindow.js
diff --git a/src/maps/Marker.js b/src/maps/Marker.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {Platform, requireNativeComponent, StyleSheet, ViewPropTypes, View} from 'react-native'
-import InfoWindow from './InfoWindow'
 import {LatLng, Point} from '../PropTypes'
 import BaseComponent from '../BaseComponent'
 
@@ -174,6 +173,11 @@ export default class Marker extends BaseComponent {
 }
 
 const AMapMarker = requireNativeComponent('AMapMarker', Marker)
+const InfoWindow = requireNativeComponent('AMapInfoWindow', {
+  propTypes: {
+    ...ViewPropTypes,
+  }
+})
 
 const style = StyleSheet.create({
   overlay: {

diff --git a/src/maps/MultiPoint.js b/src/maps/MultiPoint.js
@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react'
 import PropTypes from 'prop-types'
-import {requireNativeComponent, resolveAssetSource, ViewPropTypes} from 'react-native'
+import {requireNativeComponent, ViewPropTypes} from 'react-native'
 
 export default class MultiPoint extends PureComponent {
   static propTypes = {

diff --git a/src/maps/Polygon.js b/src/maps/Polygon.js
@@ -1,10 +1,9 @@
-import React, {PureComponent} from 'react'
 import PropTypes from 'prop-types'
-import {PixelRatio, Platform, requireNativeComponent, ViewPropTypes} from 'react-native'
+import {ColorPropType, requireNativeComponent, ViewPropTypes} from 'react-native'
 import {LatLng} from '../PropTypes'
 
-export default class Polygon extends PureComponent {
-  static propTypes = {
+export default requireNativeComponent('AMapPolygon', {
+  propTypes: {
     ...ViewPropTypes,
 
     /**
@@ -20,30 +19,16 @@ export default class Polygon extends PureComponent {
     /**
      * 边线颜色
      */
-    strokeColor: PropTypes.string,
+    strokeColor: ColorPropType,
 
     /**
      * 填充颜色
      */
-    fillColor: PropTypes.string,
+    fillColor: ColorPropType,
 
     /**
      * 层级
      */
     zIndex: PropTypes.number,
-  }
-
-  render() {
-    const props = {
-      ...this.props,
-      ...Platform.select({
-        android: {
-          strokeWidth: PixelRatio.getPixelSizeForLayoutSize(this.props.strokeWidth),
-        },
-      }),
-    }
-    return <AMapPolygon {...props}/>
-  }
-}
-
-const AMapPolygon = requireNativeComponent('AMapPolygon', Polygon)
+  },
+})
diff --git a/src/maps/Polyline.js b/src/maps/Polyline.js
@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react'
 import PropTypes from 'prop-types'
-import {PixelRatio, Platform, processColor, requireNativeComponent, ViewPropTypes} from 'react-native'
+import {ColorPropType, Platform, processColor, requireNativeComponent, ViewPropTypes} from 'react-native'
 import {LatLng} from '../PropTypes'
 
 export default class Polyline extends PureComponent {
@@ -20,7 +20,7 @@ export default class Polyline extends PureComponent {
     /**
      * 线段颜色
      */
-    color: PropTypes.string,
+    color: ColorPropType,
 
     /**
      * 层级
@@ -30,10 +30,7 @@ export default class Polyline extends PureComponent {
     /**
      * 多段颜色
      */
-    colors: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.number),
-      PropTypes.arrayOf(PropTypes.string),
-    ]),
+    colors: PropTypes.arrayOf(ColorPropType),
 
     /**
      * 是否使用颜色渐变
@@ -65,7 +62,6 @@ export default class Polyline extends PureComponent {
       ...this.props,
       ...Platform.select({
         android: {
-          width: PixelRatio.getPixelSizeForLayoutSize(this.props.width),
           colors: this.props.colors.map(processColor),
         },
       }),