重构文件结构

.eslintrc.js

@@ -3,8 +3,11 @@ module.exports = {
   extends: ['airbnb'],
   rules: {
     semi: ['error', 'never'],
+    'no-return-assign': 'off',
+    'no-underscore-dangle': ['error', { allowAfterThis: true }],
     'react/jsx-filename-extension': 'off',
     'react/require-default-props': 'off',
+    'react/prop-types': ['error', { ignore: ['navigation'] }],
     'import/no-extraneous-dependencies': 'off',
     'import/extensions': 'off',
     'import/no-unresolved': 'off',

.gitignore

@@ -8,3 +8,4 @@ Pods/
 *.iml
 *.xcworkspace
 local.properties
+Podfile.lock

.travis.yml

@@ -5,41 +5,44 @@ aliases:
       - android-23
       - extra-android-m2repository
       - extra-android-support
-
-  - &init-example
-    |
-      nvm install node
-      cd example
-      npm i
+  
+  - &android-cache
+    directories:
+      - ~/.cache/yarn
+      - ~/.gradle/caches/modules-2
+      - ~/.gradle/wrappers
+  
+  - &ios-cache
+    directories:
+      - ~/.rncache
+      - ~/Library/Caches/Yarn
+      - ~/Library/Caches/CocoaPods
 
   - &init-new-project
     |
       nvm install node
-      npm i -g react-native-cli
+      yarn global add react-native-cli
       react-native init App
       cd App
-      npm i
-      npm i react-native-amap3d
+      yarn add react-native-amap3d
 
 jobs:
   include:
     - stage: "test js"
       language: node_js
       node_js: node
-      cache:
-        directories: [node_modules]
+      cache: yarn
 
     - stage: "build test for example"
       language: android
       jdk: oraclejdk8
       android: *android
-      cache:
-        directories:
-          - example/node_modules
-          - ~/.gradle/caches
-          - ~/.gradle/wrappers
+      before_cache:
+        - rm ~/.gradle/caches/modules-2/modules-2.lock
+      cache: *android-cache
       script:
-        - *init-example
+        - nvm install node
+        - yarn
         - cd android
         - ./gradlew build
         - ls -l app/build/outputs/apk
@@ -47,13 +50,12 @@ jobs:
     - stage: "build test for example"
       language: objective-c
       osx_image: xcode9.1
-      cache:
-        directories:
-          - example/node_modules
-          - ~/.rncache
-          - ~/Library/Caches/CocoaPods/Pods
+      cache: *ios-cache
+      before_install:
       script:
-        - *init-example
+        - nvm install node
+        - brew install yarn
+        - yarn
         - cd ios
         - pod install
         - xcodebuild -workspace RNAMap3D.xcworkspace -scheme RNAMap3D -sdk iphonesimulator -quiet
@@ -62,10 +64,9 @@ jobs:
       language: android
       jdk: oraclejdk8
       android: *android
-      cache:
-        directories:
-          - ~/.gradle/caches
-          - ~/.gradle/wrappers
+      before_cache:
+        - rm ~/.gradle/caches/modules-2/modules-2.lock
+      cache: *android-cache
       script:
         - *init-new-project
         - react-native link
@@ -76,15 +77,20 @@ jobs:
     - stage: "build test for new project"
       language: objective-c
       osx_image: xcode9.1
-      cache:
-        directories:
-          - ~/.rncache
-          - ~/Library/Caches/CocoaPods/Pods
+      cache: *ios-cache
       script:
+        - brew install yarn
         - *init-new-project
         - cd ios
         - |
-          echo -e "platform :ios, '8.0'\n\ntarget 'App' do\n  pod 'yoga', path: '../node_modules/react-native/ReactCommon/yoga/'\n  pod 'React', path: '../node_modules/react-native/'\n  pod 'react-native-amap3d', path: '../node_modules/react-native-amap3d/ios/'\nend" > Podfile
+          cat << EOF > Podfile
+            platform :ios, '8.0'
+            target 'App' do
+              pod 'React', path: '../node_modules/react-native/'
+              pod 'yoga', path: '../node_modules/react-native/ReactCommon/yoga/'
+              pod 'react-native-amap3d', path: '../node_modules/react-native-amap3d/ios/'
+            end
+          EOF
         - pod install
         - xcodebuild -workspace App.xcworkspace -scheme App -sdk iphonesimulator -quiet
 

README.md

@@ -19,7 +19,6 @@ react-native 高德地图组件，使用最新 3D SDK，支持 Android + iOS，
 - 圆形绘制（Circle）
 - 热力图（HeatMap）
 - 海量点（MultiPoint）
-- 导航（驾车、步行、骑行）（待完善 🚧）
 - 离线地图
 
 <img src="http://upload-images.jianshu.io/upload_images/51256-f585098064a8d9de.png?imageView2/2/w/600" width="215"> <img src="http://upload-images.jianshu.io/upload_images/51256-a2b8b7fb93738f2e.png?imageView2/2/w/600" width="215"> <img src="http://upload-images.jianshu.io/upload_images/51256-85b17548888e2bd6.png?imageView2/2/w/600" width="215"> <img src="http://upload-images.jianshu.io/upload_images/51256-8c8b685f3cfbc350.png?imageView2/2/w/600" width="215">
@@ -31,6 +30,10 @@ react-native 高德地图组件，使用最新 3D SDK，支持 Android + iOS，
 ```
 $ npm i react-native-amap3d
 ```
+或
+```
+$ yarn add react-native-amap3d
+```
 
 ### 项目配置
 #### Android
@@ -48,8 +51,9 @@ target 'Your Target' do
   pod 'yoga', path: '../node_modules/react-native/ReactCommon/yoga/'
   pod 'React', path: '../node_modules/react-native/', :subspecs => [
     'BatchedBridge',
+    'DevSupport',
   ]
-  pod 'react-native-amap3d', path: '../node_modules/react-native-amap3d/ios/'
+  pod 'react-native-amap3d', path: '../node_modules/react-native-amap3d/lib/ios/'
 end
 ```
 
@@ -67,10 +71,9 @@ $ pod install
 2. 编辑 Android 项目的 `AndroidManifest.xml`（一般在 `android\app\src\main\AndroidManifest.xml`），添加如下代码：
    ```xml
    <application>
-       <!-- 确保 meta-data 是直属 application 的子标签 -->
-       <meta-data
-         android:name="com.amap.api.v2.apikey"
-         android:value="你的高德 Key"/>
+     <meta-data
+       android:name="com.amap.api.v2.apikey"
+       android:value="你的高德 Key" />
    </application>
    ```
 
@@ -85,32 +88,30 @@ $ pod install
 
 ### 导入地图模块
 ```jsx
-import {MapView, Marker, Polyline} from 'react-native-amap3d'
+import { MapView } from 'react-native-amap3d'
+
+const { Marker } = MapView
+
 <MapView>
   <Marker .../>
 </MapView>
 ```
-或者
-```jsx
-import MapView from 'react-native-amap3d'
-<MapView>
-  <MapView.Marker .../>
-</MapView>
-```
 
 ### 基本用法
 ```jsx
-<MapView coordinate={{
-  latitude: 39.91095,
-  longitude: 116.37296,
-}}/>
+<MapView
+  coordinate={{
+    latitude: 39.91095,
+    longitude: 116.37296,
+  }}
+/>
 ```
 
 ### 启用定位并监听定位事件
 ```jsx
 <MapView
   locationEnabled
-  onLocation={({nativeEvent}) =>
+  onLocation={({ nativeEvent }) =>
     console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
 />
 ```
@@ -121,12 +122,13 @@ import MapView from 'react-native-amap3d'
   <Marker
     draggable
     title='这是一个可拖拽的标记'
-    onDragEnd={({nativeEvent}) =>
+    onDragEnd={({ nativeEvent }) =>
       console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
     coordinate={{
       latitude: 39.91095,
       longitude: 116.37296,
-    }}/>
+    }}
+  />
 </MapView>
 ```
 
@@ -144,19 +146,19 @@ const coordinate = {
 </Marker>
 ```
 
-更多示例请参考[示例项目](https://github.com/qiuxiang/react-native-amap3d/tree/master/example)。
+[更多示例](https://github.com/qiuxiang/react-native-amap3d/tree/master/example/examples)。
 
 
 ## 接口
 
 请参考注释文档：
-- [MapView](https://github.com/qiuxiang/react-native-amap3d/blob/master/src/maps/MapView.js)
-- [Marker](https://github.com/qiuxiang/react-native-amap3d/blob/master/src/maps/Marker.js)
-- [Polyline](https://github.com/qiuxiang/react-native-amap3d/blob/master/src/maps/Polyline.js)
-- [Polygon](https://github.com/qiuxiang/react-native-amap3d/blob/master/src/maps/Polygon.js)
-- [Circle](https://github.com/qiuxiang/react-native-amap3d/blob/master/src/maps/Circle.js)
-- [HeatMap](https://github.com/qiuxiang/react-native-amap3d/blob/master/src/maps/HeatMap.js)
-- [MultiPoint](https://github.com/qiuxiang/react-native-amap3d/blob/master/src/maps/MultiPoint.js)
+- [MapView](https://github.com/qiuxiang/react-native-amap3d/tree/master/lib/js/maps/MapView.js)
+- [Marker](https://github.com/qiuxiang/react-native-amap3d/tree/master/lib/js/maps/Marker.js)
+- [Polyline](https://github.com/qiuxiang/react-native-amap3d/tree/master/lib/js/maps/Polyline.js)
+- [Polygon](https://github.com/qiuxiang/react-native-amap3d/tree/master/lib/js/maps/Polygon.js)
+- [Circle](https://github.com/qiuxiang/react-native-amap3d/tree/master/lib/js/maps/Circle.js)
+- [HeatMap](https://github.com/qiuxiang/react-native-amap3d/tree/master/lib/js/maps/HeatMap.js)
+- [MultiPoint](https://github.com/qiuxiang/react-native-amap3d/tree/master/lib/js/maps/MultiPoint.js)
 
 
 ## 关于编译问题

example/android/app/src/main/AndroidManifest.xml → android/app/src/main/AndroidManifest.xml

@@ -23,9 +23,10 @@
             </intent-filter>
         </activity>
         <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+
         <meta-data
             android:name="com.amap.api.v2.apikey"
-            android:value="3bb9e200c9ec35643b217957c593c214"/>
+            android:value="3bb9e200c9ec35643b217957c593c214" />
     </application>
 
 </manifest>

example/android/app/src/main/java/com/rnamap3d/MainApplication.java → android/app/src/main/java/com/rnamap3d/MainApplication.java

@@ -3,7 +3,6 @@ package com.rnamap3d;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
-import cn.qiuxiang.react.amap3d.AMap3DPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -12,36 +11,38 @@ import com.facebook.soloader.SoLoader;
 import java.util.Arrays;
 import java.util.List;
 
+import cn.qiuxiang.react.amap3d.AMap3DPackage;
+
 public class MainApplication extends Application implements ReactApplication {
 
-  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
-    @Override
-    public boolean getUseDeveloperSupport() {
-      return BuildConfig.DEBUG;
-    }
+    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
+        @Override
+        public boolean getUseDeveloperSupport() {
+            return BuildConfig.DEBUG;
+        }
+
+        @Override
+        protected List<ReactPackage> getPackages() {
+            return Arrays.asList(
+                    new MainReactPackage(),
+                    new AMap3DPackage()
+            );
+        }
+
+        @Override
+        protected String getJSMainModuleName() {
+            return "index";
+        }
+    };
 
     @Override
-    protected List<ReactPackage> getPackages() {
-      return Arrays.<ReactPackage>asList(
-          new MainReactPackage(),
-          new AMap3DPackage()
-      );
+    public ReactNativeHost getReactNativeHost() {
+        return mReactNativeHost;
     }
 
     @Override
-    protected String getJSMainModuleName() {
-      return "index";
+    public void onCreate() {
+        super.onCreate();
+        SoLoader.init(this, /* native exopackage */ false);
     }
-  };
-
-  @Override
-  public ReactNativeHost getReactNativeHost() {
-    return mReactNativeHost;
-  }
-
-  @Override
-  public void onCreate() {
-    super.onCreate();
-    SoLoader.init(this, /* native exopackage */ false);
-  }
 }

android/build.gradle

-apply plugin: 'com.android.library'
-apply plugin: 'kotlin-android'
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
-    ext.kotlin_version = '1.2.20'
-
     repositories {
         jcenter()
     }
-
     dependencies {
         classpath 'com.android.tools.build:gradle:2.2.3'
-        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
-    }
-}
 
-android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
-
-    defaultConfig {
-        minSdkVersion 16
-        targetSdkVersion 22
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
     }
 }
 
-dependencies {
-    provided 'com.facebook.react:react-native:+'
-    compile 'com.amap.api:navi-3dmap:5.3.0_3dmap5.3.0'
-    compile "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+allprojects {
+    repositories {
+        mavenLocal()
+        jcenter()
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url "$rootDir/../node_modules/react-native/android"
+        }
+    }
 }

example/android/settings.gradle → android/settings.gradle

 rootProject.name = 'RNAMap3D'
 include ':react-native-amap3d'
-project(':react-native-amap3d').projectDir = new File(rootProject.projectDir, '../../android')
+project(':react-native-amap3d').projectDir = new File(rootProject.projectDir, '../lib/android')
 
 include ':app'

example/README.md

-## 安装依赖
-
-```
-$ yarn
-```
-
-
-## Android
-
-```
-$ yarn run-android
-```
-
-
-## iOS
-
-```
-$ cd ios && pod install && cd ..
-$ yarn run-ios
-```
-
-
-## 截图
-
-### Android
-![](https://user-images.githubusercontent.com/1709072/27509246-28ee8a0a-592b-11e7-9148-ed24c86ede82.jpg) ![](https://user-images.githubusercontent.com/1709072/27509248-29000d20-592b-11e7-90ef-3f56c4300625.jpg) ![](https://user-images.githubusercontent.com/1709072/27509247-28feba88-592b-11e7-90ec-3e3680cee241.jpg) ![](https://user-images.githubusercontent.com/1709072/27509249-2902531e-592b-11e7-801d-5fef6a87cead.jpg) ![](https://user-images.githubusercontent.com/1709072/27509250-2906e64a-592b-11e7-8cc5-1ce84090ce66.jpg) ![](https://user-images.githubusercontent.com/1709072/27509251-29084d5a-592b-11e7-84af-f49dbcea9873.jpg) ![](https://user-images.githubusercontent.com/1709072/27509252-291d5876-592b-11e7-8849-15360c2e16c2.jpg) ![](https://user-images.githubusercontent.com/1709072/27509253-2933ef5a-592b-11e7-88b4-10f67fa03706.jpg)
-
-### iOS
-![](https://user-images.githubusercontent.com/1709072/27509210-467474e6-592a-11e7-801d-a833b9110862.png) ![](https://user-images.githubusercontent.com/1709072/27509209-4672623c-592a-11e7-9d41-b87b0805a8ab.png) ![](https://user-images.githubusercontent.com/1709072/27509219-68c18cbe-592a-11e7-8309-25a9922ce101.png) ![](https://user-images.githubusercontent.com/1709072/27509212-46a74042-592a-11e7-9417-316ae9040c21.png) ![](https://user-images.githubusercontent.com/1709072/27509211-467e63a2-592a-11e7-9d45-208e0360e956.png) ![](https://user-images.githubusercontent.com/1709072/27509216-68a9e6fe-592a-11e7-8362-d30511c9249d.png) ![](https://user-images.githubusercontent.com/1709072/27509217-68bddbc8-592a-11e7-8e92-0229fd8eb410.png) ![](https://user-images.githubusercontent.com/1709072/27509218-68bf1a7e-592a-11e7-8ec0-fa9c5b67da6a.png)

example/android/build.gradle

-// Top-level build file where you can add configuration options common to all sub-projects/modules.
-
-buildscript {
-    repositories {
-        jcenter()
-    }
-    dependencies {
-        classpath 'com.android.tools.build:gradle:2.2.3'
-
-        // NOTE: Do not place your application dependencies here; they belong
-        // in the individual module build.gradle files
-    }
-}
-
-allprojects {
-    repositories {
-        mavenLocal()
-        jcenter()
-        maven {
-            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url "$rootDir/../node_modules/react-native/android"
-        }
-    }
-}

example/src/examples.js → example/examples.js

-import React, {Component} from 'react'
+import React, { Component } from 'react'
 import {
   Platform,
   ScrollView,
@@ -9,70 +9,13 @@ import {
   View,
 } from 'react-native'
 
-let Touchable = TouchableHighlight
-if (Platform.OS === 'android') {
-  Touchable = TouchableNativeFeedback
-}
-
-export default class Examples extends Component {
-  static navigationOptions = {
-    title: 'Examples',
-  }
-
-  _renderItem(title, route) {
-    return <Touchable onPress={() => this.props.navigation.navigate(route)}>
-      <View style={styles.item}>
-        <Text style={styles.itemText}>{title}</Text>
-      </View>
-    </Touchable>
-  }
-
-  render() {
-    return <ScrollView style={styles.scrollView} contentContainerStyle={styles.container}>
-      <View style={styles.group}>
-        {this._renderItem('地图模式', 'MapTypes')}
-        <View style={styles.separator}/>
-        {this._renderItem('基本图层', 'Layers')}
-        <View style={styles.separator}/>
-        {this._renderItem('室内地图', 'Indoor')}
-        <View style={styles.separator}/>
-        {this._renderItem('地图控件', 'Controls')}
-        <View style={styles.separator}/>
-        {this._renderItem('手势交互', 'Gestures')}
-        <View style={styles.separator}/>
-        {this._renderItem('动画移动', 'Animated')}
-        <View style={styles.separator}/>
-        {this._renderItem('地图事件', 'Events')}
-      </View>
-      <View style={styles.group}>
-        {this._renderItem('添加标记', 'Marker')}
-        <View style={styles.separator}/>
-        {this._renderItem('绘制折线', 'Polyline')}
-        <View style={styles.separator}/>
-        {this._renderItem('绘制多边形', 'Polygon')}
-        <View style={styles.separator}/>
-        {this._renderItem('绘制圆形', 'Circle')}
-        <View style={styles.separator}/>
-        {this._renderItem('热力图', 'HeatMap')}
-        <View style={styles.separator}/>
-        {this._renderItem('海量点', 'MultiPoint')}
-      </View>
-      <View style={styles.group}>
-        {this._renderItem('导航', 'Navigation')}
-        <View style={styles.separator}/>
-        {this._renderItem('离线地图', 'Offline')}
-      </View>
-    </ScrollView>
-  }
-}
-
 const styles = StyleSheet.create({
   scrollView: {
     ...Platform.select({
       android: {
         backgroundColor: '#f5f5f5',
       },
-    })
+    }),
   },
   container: {
     paddingBottom: 15,
@@ -93,3 +36,62 @@ const styles = StyleSheet.create({
     color: '#424242',
   },
 })
+
+let Touchable = TouchableHighlight
+if (Platform.OS === 'android') {
+  Touchable = TouchableNativeFeedback
+}
+
+export default class Examples extends Component {
+  static navigationOptions = {
+    title: 'Examples',
+  }
+
+  _renderItem(title, route) {
+    return (
+      <Touchable onPress={() => this.props.navigation.navigate(route)}>
+        <View style={styles.item}>
+          <Text style={styles.itemText}>{title}</Text>
+        </View>
+      </Touchable>
+    )
+  }
+
+  render() {
+    return (
+      <ScrollView style={styles.scrollView} contentContainerStyle={styles.container}>
+        <View style={styles.group}>
+          {this._renderItem('地图模式', 'MapTypes')}
+          <View style={styles.separator} />
+          {this._renderItem('基本图层', 'Layers')}
+          <View style={styles.separator} />
+          {this._renderItem('室内地图', 'Indoor')}
+          <View style={styles.separator} />
+          {this._renderItem('地图控件', 'Controls')}
+          <View style={styles.separator} />
+          {this._renderItem('手势交互', 'Gestures')}
+          <View style={styles.separator} />
+          {this._renderItem('动画移动', 'Animated')}
+          <View style={styles.separator} />
+          {this._renderItem('地图事件', 'Events')}
+        </View>
+        <View style={styles.group}>
+          {this._renderItem('添加标记', 'Marker')}
+          <View style={styles.separator} />
+          {this._renderItem('绘制折线', 'Polyline')}
+          <View style={styles.separator} />
+          {this._renderItem('绘制多边形', 'Polygon')}
+          <View style={styles.separator} />
+          {this._renderItem('绘制圆形', 'Circle')}
+          <View style={styles.separator} />
+          {this._renderItem('热力图', 'HeatMap')}
+          <View style={styles.separator} />
+          {this._renderItem('海量点', 'MultiPoint')}
+        </View>
+        <View style={styles.group}>
+          {this._renderItem('导航', 'Navigation')}
+        </View>
+      </ScrollView>
+    )
+  }
+}

example/src/examples/animated.js → example/examples/animated.js

-import React, {Component} from 'react'
+import React, { Component } from 'react'
 import {
   StyleSheet,
   View,
@@ -8,6 +8,29 @@ import {
 } from 'react-native'
 import MapView from 'react-native-amap3d'
 
+const styles = StyleSheet.create({
+  body: {
+    flex: 1,
+  },
+  buttons: {
+    width: Dimensions.get('window').width,
+    position: 'absolute',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  button: {
+    padding: 10,
+    paddingLeft: 20,
+    paddingRight: 20,
+    margin: 10,
+    borderRadius: 50,
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  },
+  text: {
+    fontSize: 16,
+  },
+})
+
 export default class AnimatedExample extends Component {
   static navigationOptions = {
     title: '动画移动',
@@ -21,7 +44,7 @@ export default class AnimatedExample extends Component {
       coordinate: {
         latitude: 39.97837,
         longitude: 116.31363,
-      }
+      },
     })
   }
 
@@ -33,48 +56,27 @@ export default class AnimatedExample extends Component {
       coordinate: {
         latitude: 39.90864,
         longitude: 116.39745,
-      }
+      },
     })
   }
 
   render() {
-    return <View style={styles.body}>
-      <MapView ref={ref => this.mapView = ref} style={styles.body}/>
-      <View style={styles.buttons}>
-        <View style={styles.button}>
-          <TouchableOpacity onPress={this._animatedToZGC}>
-            <Text style={styles.text}>中关村</Text>
-          </TouchableOpacity>
-        </View>
-        <View style={styles.button}>
-          <TouchableOpacity onPress={this._animatedToTAM}>
-            <Text style={styles.text}>天安门</Text>
-          </TouchableOpacity>
+    return (
+      <View style={styles.body}>
+        <MapView ref={ref => this.mapView = ref} style={styles.body} />
+        <View style={styles.buttons}>
+          <View style={styles.button}>
+            <TouchableOpacity onPress={this._animatedToZGC}>
+              <Text style={styles.text}>中关村</Text>
+            </TouchableOpacity>
+          </View>
+          <View style={styles.button}>
+            <TouchableOpacity onPress={this._animatedToTAM}>
+              <Text style={styles.text}>天安门</Text>
+            </TouchableOpacity>
+          </View>
         </View>
       </View>
-    </View>
+    )
   }
 }
-
-const styles = StyleSheet.create({
-  body: {
-    flex: 1,
-  },
-  buttons: {
-    width: Dimensions.get('window').width,
-    position: 'absolute',
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  button: {
-    padding: 10,
-    paddingLeft: 20,
-    paddingRight: 20,
-    margin: 10,
-    borderRadius: 50,
-    backgroundColor: 'rgba(255, 255, 255, 0.9)',
-  },
-  text: {
-    fontSize: 16,
-  },
-})

example/src/examples/circle.js → example/examples/circle.js

-import React, {Component} from 'react'
-import {StyleSheet} from 'react-native'
-import {MapView, Circle} from 'react-native-amap3d'
+import React, { Component } from 'react'
+import { StyleSheet } from 'react-native'
+import { MapView, Circle } from 'react-native-amap3d'
 
 export default class CircleExample extends Component {
   static navigationOptions = {
@@ -13,13 +13,16 @@ export default class CircleExample extends Component {
   }
 
   render() {
-    return <MapView style={StyleSheet.absoluteFill}>
-      <Circle
-        strokeWidth={5}
-        strokeColor='rgba(0, 0, 255, 0.5)'
-        fillColor='rgba(255, 0, 0, 0.5)'
-        radius={10000}
-        coordinate={this.coordinate}/>
-    </MapView>
+    return (
+      <MapView style={StyleSheet.absoluteFill}>
+        <Circle
+          strokeWidth={5}
+          strokeColor="rgba(0, 0, 255, 0.5)"
+          fillColor="rgba(255, 0, 0, 0.5)"
+          radius={10000}
+          coordinate={this.coordinate}
+        />
+      </MapView>
+    )
   }
 }

example/examples/controls.js

+import React, { Component } from 'react'
+import { StyleSheet, Switch, Text, View } from 'react-native'
+import MapView from 'react-native-amap3d'
+import styles from '../styles'
+
+export default class ControlsExample extends Component {
+  static navigationOptions = {
+    title: '地图控件',
+  }
+
+  state = {
+    showsCompass: false,
+    showsScale: true,
+    showsZoomControls: true,
+    showsLocationButton: false,
+  }
+
+  render() {
+    return (
+      <View style={StyleSheet.absoluteFill}>
+        <View style={styles.controls}>
+          <View style={styles.control}>
+            <Text>指南针</Text>
+            <Switch
+              style={styles.switch}
+              onValueChange={showsCompass => this.setState({ showsCompass })}
+              value={this.state.showsCompass}
+            />
+          </View>
+          <View style={styles.control}>
+            <Text>比例尺</Text>
+            <Switch
+              style={styles.switch}
+              onValueChange={showsScale => this.setState({ showsScale })}
+              value={this.state.showsScale}
+            />
+          </View>
+          <View style={styles.control}>
+            <Text>定位</Text>
+            <Switch
+              style={styles.switch}
+              onValueChange={showsLocationButton => this.setState({ showsLocationButton })}
+              value={this.state.showsLocationButton}
+            />
+          </View>
+          <View style={styles.control}>
+            <Text>缩放</Text>
+            <Switch
+              style={styles.switch}
+              onValueChange={showsZoomControls => this.setState({ showsZoomControls })}
+              value={this.state.showsZoomControls}
+            />
+          </View>
+        </View>
+        <MapView
+          locationEnabled={this.state.showsLocationButton}
+          showsCompass={this.state.showsCompass}
+          showsScale={this.state.showsScale}
+          showsLocationButton={this.state.showsLocationButton}
+          showsZoomControls={this.state.showsZoomControls}
+          style={styles.map}
+        />
+      </View>
+    )
+  }
+}

example/src/examples/events.js → example/examples/events.js

-import React, {Component} from 'react'
-import {FlatList, StyleSheet, Text, View} from 'react-native'
+import React, { Component } from 'react'
+import { FlatList, StyleSheet, Text, View } from 'react-native'
 import MapView from 'react-native-amap3d'
 
+const styles = StyleSheet.create({
+  body: {
+    flex: 1,
+  },
+  logs: {
+    elevation: 8,
+    backgroundColor: '#fff',
+  },
+  logText: {
+    paddingLeft: 15,
+    paddingRight: 15,
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+})
+
 export default class EventsExample extends Component {
   static navigationOptions = {
     title: '地图事件',
@@ -17,7 +33,7 @@ export default class EventsExample extends Component {
         {
           key: Date.now(),
           time: new Date().toLocaleString(),
-          event: event,
+          event,
           data: JSON.stringify(data, null, 2),
         },
         ...this.state.logs,
@@ -25,45 +41,35 @@ export default class EventsExample extends Component {
     })
   }
 
-  _logPressEvent = ({nativeEvent}) => this._log('onPress', nativeEvent)
-  _logLongPressEvent = ({nativeEvent}) => this._log('onLongPress', nativeEvent)
-  _logLocationEvent = ({nativeEvent}) => this._log('onLocation', nativeEvent)
-  _logStatusChangeEvent = ({nativeEvent}) => this._log('onStatusChange', nativeEvent)
-  _logStatusChangeCompleteEvent = ({nativeEvent}) => this._log('onStatusChangeComplete', nativeEvent)
+  _logPressEvent = ({ nativeEvent }) => this._log('onPress', nativeEvent)
+  _logLongPressEvent = ({ nativeEvent }) => this._log('onLongPress', nativeEvent)
+  _logLocationEvent = ({ nativeEvent }) => this._log('onLocation', nativeEvent)
+  _logStatusChangeEvent = ({ nativeEvent }) => this._log('onStatusChange', nativeEvent)
+  _logStatusChangeCompleteEvent = ({ nativeEvent }) => this._log('onStatusChangeComplete', nativeEvent)
 
-  _renderItem = ({item}) =>
+  _renderItem = ({ item }) =>
     <Text style={styles.logText}>{item.time} {item.event}: {item.data}</Text>
 
   render() {
-    return <View style={styles.body}>
-      <MapView
-        locationEnabled
-        locationInterval={10000}
-        distanceFilter={10}
-        onPress={this._logPressEvent}
-        onLongPress={this._logLongPressEvent}
-        onLocation={this._logLocationEvent}
-        onStatusChange={this._logStatusChangeEvent}
-        onStatusChangeComplete={this._logStatusChangeCompleteEvent}
-        style={styles.body}/>
-      <FlatList style={styles.logs} data={this.state.logs}
-                renderItem={this._renderItem}/>
-    </View>
+    return (
+      <View style={styles.body}>
+        <MapView
+          locationEnabled
+          locationInterval={10000}
+          distanceFilter={10}
+          onPress={this._logPressEvent}
+          onLongPress={this._logLongPressEvent}
+          onLocation={this._logLocationEvent}
+          onStatusChange={this._logStatusChangeEvent}
+          onStatusChangeComplete={this._logStatusChangeCompleteEvent}
+          style={styles.body}
+        />
+        <FlatList
+          style={styles.logs}
+          data={this.state.logs}
+          renderItem={this._renderItem}
+        />
+      </View>
+    )
   }
 }
-
-const styles = StyleSheet.create({
-  body: {
-    flex: 1,
-  },
-  logs: {
-    elevation: 8,
-    backgroundColor: '#fff',
-  },
-  logText: {
-    paddingLeft: 15,
-    paddingRight: 15,
-    paddingTop: 10,
-    paddingBottom: 10,
-  },
-})

example/examples/gestures.js

+import React, { Component } from 'react'
+import { StyleSheet, View, Text, Switch } from 'react-native'
+import MapView from 'react-native-amap3d'
+import styles from '../styles'
+
+export default class GesturesExample extends Component {
+  static navigationOptions = {
+    title: '手势交互',
+  }
+
+  state = {
+    zoomEnabled: true,
+    scrollEnabled: true,
+    rotateEnabled: true,
+    tiltEnabled: true,
+  }
+
+  render() {
+    return (
+      <View style={StyleSheet.absoluteFill}>
+        <View style={styles.controls}>
+          <View style={styles.control}>
+            <Text>旋转</Text>
+            <Switch
+              style={styles.switch}
+              onValueChange={rotateEnabled => this.setState({ rotateEnabled })}
+              value={this.state.rotateEnabled}
+            />
+          </View>
+          <View style={styles.control}>
+            <Text>滑动</Text>
+            <Switch
+              style={styles.switch}
+              onValueChange={scrollEnabled => this.setState({ scrollEnabled })}
+              value={this.state.scrollEnabled}
+            />
+          </View>
+          <View style={styles.control}>
+            <Text>缩放</Text>
+            <Switch
+              style={styles.switch}
+              onValueChange={zoomEnabled => this.setState({ zoomEnabled })}
+              value={this.state.zoomEnabled}
+            />
+          </View>
+          <View style={styles.control}>
+            <Text>倾斜</Text>
+            <Switch
+              style={styles.switch}
+              onValueChange={tiltEnabled => this.setState({ tiltEnabled })}
+              value={this.state.tiltEnabled}
+            />
+          </View>
+        </View>
+        <MapView
+          zoomEnabled={this.state.zoomEnabled}
+          scrollEnabled={this.state.scrollEnabled}
+          rotateEnabled={this.state.rotateEnabled}
+          tiltEnabled={this.state.tiltEnabled}
+          style={styles.map}
+        />
+      </View>
+    )
+  }
+}

example/src/examples/heat-map.js → example/examples/heat-map.js

-import React, {Component} from 'react'
-import {StyleSheet} from 'react-native'
-import {MapView, HeatMap} from 'react-native-amap3d'
+import React, { Component } from 'react'
+import { StyleSheet } from 'react-native'
+import { MapView, HeatMap } from 'react-native-amap3d'
 
 export default class HeatMapExample extends Component {
   static navigationOptions = {
     title: '热力图',
   }
 
-  _coordinates = (new Array(200)).fill(0).map(i => ({
+  _coordinates = (new Array(200)).fill(0).map(() => ({
     latitude: 39.5 + Math.random(),
     longitude: 116 + Math.random(),
   }))
 
   render() {
-    return <MapView zoomLevel={9} style={StyleSheet.absoluteFill}>
-      <HeatMap
-        opacity={0.8}
-        radius={20}
-        coordinates={this._coordinates}/>
-    </MapView>
+    return (
+      <MapView zoomLevel={9} style={StyleSheet.absoluteFill}>
+        <HeatMap
+          opacity={0.8}
+          radius={20}
+          coordinates={this._coordinates}
+        />
+      </MapView>
+    )
   }
 }

example/src/examples/indoor.js → example/examples/indoor.js

-import React, {Component} from 'react'
-import {StyleSheet} from 'react-native'
+import React, { Component } from 'react'
+import { StyleSheet } from 'react-native'
 import MapView from 'react-native-amap3d'
 
 export default class IndoorExample extends Component {
@@ -8,14 +8,17 @@ export default class IndoorExample extends Component {
   }
 
   render() {
-    return <MapView
-      coordinate={{
-        latitude: 39.90980,
-        longitude: 116.37296,
-      }}
-      zoomLevel={18}
-      showsIndoorMap={true}
-      tilt={45}
-      style={StyleSheet.absoluteFill}/>
+    return (
+      <MapView
+        coordinate={{
+          latitude: 39.90980,
+          longitude: 116.37296,
+        }}
+        zoomLevel={18}
+        showsIndoorMap
+        tilt={45}
+        style={StyleSheet.absoluteFill}
+      />
+    )
   }
 }

example/src/examples/layers.js → example/examples/layers.js

-import React, {Component} from 'react'
-import {StyleSheet, View, Text, Switch, Platform} from 'react-native'
+import React, { Component } from 'react'
+import { StyleSheet, View, Text, Switch, Platform } from 'react-native'
 import MapView from 'react-native-amap3d'
 import commonStyles from '../styles'
 
-export default class Layers extends Component {
-  static navigationOptions = {
-    title: '图层的显示',
-  }
-
-  state = {
-    showsLabels: true,
-    showsTraffic: false,
-    showsBuildings: false,
-  }
-
-  render() {
-    return <View style={StyleSheet.absoluteFill}>
-      <View style={styles.controls}>
-        <View style={styles.control}>
-          <Text style={styles.label}>建筑</Text>
-          <Switch
-            onValueChange={showsBuildings => this.setState({showsBuildings})}
-            value={this.state.showsBuildings}/>
-        </View>
-        <View style={styles.control}>
-          <Text style={styles.label}>路况</Text>
-          <Switch
-            onValueChange={showsTraffic => this.setState({showsTraffic})}
-            value={this.state.showsTraffic}/>
-        </View>
-        <View style={styles.control}>
-          <Text style={styles.label}>标签</Text>
-          <Switch
-            onValueChange={showsLabels => this.setState({showsLabels})}
-            value={this.state.showsLabels}/>
-        </View>
-      </View>
-      <MapView
-        zoomLevel={17}
-        tilt={60}
-        showsLabels={this.state.showsLabels}
-        showsTraffic={this.state.showsTraffic}
-        showsBuildings={this.state.showsBuildings}
-        style={styles.map}/>
-    </View>
-  }
-}
-
 const styles = {
   ...commonStyles,
   map: [commonStyles.map, {
@@ -66,3 +22,53 @@ const styles = {
     marginRight: 5,
   },
 }
+
+export default class Layers extends Component {
+  static navigationOptions = {
+    title: '图层的显示',
+  }
+
+  state = {
+    showsLabels: true,
+    showsTraffic: false,
+    showsBuildings: false,
+  }
+
+  render() {
+    return (
+      <View style={StyleSheet.absoluteFill}>
+        <View style={styles.controls}>
+          <View style={styles.control}>
+            <Text style={styles.label}>建筑</Text>
+            <Switch
+              onValueChange={showsBuildings => this.setState({ showsBuildings })}
+              value={this.state.showsBuildings}
+            />
+          </View>
+          <View style={styles.control}>
+            <Text style={styles.label}>路况</Text>
+            <Switch
+              onValueChange={showsTraffic => this.setState({ showsTraffic })}
+              value={this.state.showsTraffic}
+            />
+          </View>
+          <View style={styles.control}>
+            <Text style={styles.label}>标签</Text>
+            <Switch
+              onValueChange={showsLabels => this.setState({ showsLabels })}
+              value={this.state.showsLabels}
+            />
+          </View>
+        </View>
+        <MapView
+          zoomLevel={17}
+          tilt={60}
+          showsLabels={this.state.showsLabels}
+          showsTraffic={this.state.showsTraffic}
+          showsBuildings={this.state.showsBuildings}
+          style={styles.map}
+        />
+      </View>
+    )
+  }
+}

example/examples/map-types.js

+import React, { Component } from 'react'
+import { StyleSheet, Picker } from 'react-native'
+import MapView from 'react-native-amap3d'
+
+export default class MapTypesExample extends Component {
+  static navigationOptions = ({ navigation }) => {
+    const { state, setParams } = navigation
+    state.params = state.params || { mapType: 'standard' }
+    const props = {
+      mode: 'dropdown',
+      style: { width: 100 },
+      selectedValue: state.params.mapType,
+      onValueChange: mapType => setParams({ mapType }),
+    }
+    return {
+      title: '地图模式',
+      headerRight: (
+        <Picker {...props}>
+          <Picker.Item label="标准" value="standard" />
+          <Picker.Item label="卫星" value="satellite" />
+          <Picker.Item label="导航" value="navigation" />
+          <Picker.Item label="夜间" value="night" />
+          <Picker.Item label="公交" value="bus" />
+        </Picker>
+      ),
+    }
+  }
+
+  render() {
+    return (
+      <MapView
+        mapType={this.props.navigation.state.params.mapType}
+        style={StyleSheet.absoluteFill}
+      />
+    )
+  }
+}

example/src/examples/marker.js → example/examples/marker.js

-import React, {Component} from 'react'
-import {Alert, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
-import {MapView, Marker} from 'react-native-amap3d'
+import React, { Component } from 'react'
+import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { MapView, Marker } from 'react-native-amap3d'
+
+const styles = StyleSheet.create({
+  customIcon: {
+    width: 40,
+    height: 40,
+  },
+  customInfoWindow: {
+    backgroundColor: '#8bc34a',
+    padding: 10,
+    borderRadius: 10,
+    elevation: 4,
+    borderWidth: 2,
+    borderColor: '#689F38',
+    marginBottom: 5,
+  },
+  customMarker: {
+    backgroundColor: '#009688',
+    alignItems: 'center',
+    borderRadius: 5,
+    padding: 5,
+  },
+  markerText: {
+    color: '#fff',
+  },
+})
 
 export default class MarkerExample extends Component {
   static navigationOptions = {
@@ -15,11 +40,15 @@ export default class MarkerExample extends Component {
     this.mounted = true
     setInterval(() => {
       if (this.mounted) {
-        this.setState({time: new Date()})
+        this.setState({ time: new Date() })
       }
     }, 1000)
   }
 
+  componentWillUnmount() {
+    this.mounted = false
+  }
+
   _coordinates = [
     {
       latitude: 39.806901,
@@ -39,74 +68,45 @@ export default class MarkerExample extends Component {
     },
   ]
 
-  componentWillUnmount() {
-    this.mounted = false
-  }
-
   _onInfoWindowPress = () => Alert.alert('信息窗口点击事件')
   _onCustomInfoWindowPress = () => Alert.alert('自定义信息窗口点击事件')
-  _onDragEvent = ({nativeEvent}) => Alert.alert(`新坐标：${nativeEvent.latitude}, ${nativeEvent.longitude}`)
+  _onDragEvent = ({ nativeEvent }) => Alert.alert(`新坐标：${nativeEvent.latitude}, ${nativeEvent.longitude}`)
 
   render() {
-    return <MapView style={StyleSheet.absoluteFill}>
-      <Marker
-        active
-        draggable
-        title='一个可拖拽的标记'
-        description={this.state.time.toLocaleTimeString()}
-        onDragEnd={this._onDragEvent}
-        onInfoWindowPress={this._onInfoWindowPress}
-        coordinate={this._coordinates[0]}
-      />
-      <Marker
-        color='green'
-        coordinate={this._coordinates[1]}>
-        <TouchableOpacity activeOpacity={0.9} onPress={this._onCustomInfoWindowPress}>
-          <View style={styles.customInfoWindow}>
-            <Text>自定义信息窗口</Text>
-            <Text>{this.state.time.toLocaleTimeString()}</Text>
-          </View>
-        </TouchableOpacity>
-      </Marker>
-      <Marker
-        image='flag'
-        title='自定义图片'
-        coordinate={this._coordinates[2]}
-      />
-      <Marker
-        title='自定义 View'
-        icon={() =>
-          <View style={styles.customMarker}>
-            <Text style={styles.markerText}>{this.state.time.toLocaleTimeString()}</Text>
-          </View>
-        }
-        coordinate={this._coordinates[3]}
-      />
-    </MapView>
+    return (
+      <MapView style={StyleSheet.absoluteFill}>
+        <Marker
+          active
+          draggable
+          title="一个可拖拽的标记"
+          description={this.state.time.toLocaleTimeString()}
+          onDragEnd={this._onDragEvent}
+          onInfoWindowPress={this._onInfoWindowPress}
+          coordinate={this._coordinates[0]}
+        />
+        <Marker color="green" coordinate={this._coordinates[1]} >
+          <TouchableOpacity activeOpacity={0.9} onPress={this._onCustomInfoWindowPress}>
+            <View style={styles.customInfoWindow}>
+              <Text>自定义信息窗口</Text>
+              <Text>{this.state.time.toLocaleTimeString()}</Text>
+            </View>
+          </TouchableOpacity>
+        </Marker>
+        <Marker
+          image="flag"
+          title="自定义图片"
+          coordinate={this._coordinates[2]}
+        />
+        <Marker
+          title="自定义 View"
+          icon={() => (
+            <View style={styles.customMarker}>
+              <Text style={styles.markerText}>{this.state.time.toLocaleTimeString()}</Text>
+            </View>
+           )}
+          coordinate={this._coordinates[3]}
+        />
+      </MapView>
+    )
   }
 }
-
-const styles = StyleSheet.create({
-  customIcon: {
-    width: 40,
-    height: 40,
-  },
-  customInfoWindow: {
-    backgroundColor: '#8bc34a',
-    padding: 10,
-    borderRadius: 10,
-    elevation: 4,
-    borderWidth: 2,
-    borderColor: '#689F38',
-    marginBottom: 5,
-  },
-  customMarker: {
-    backgroundColor: '#009688',
-    alignItems: 'center',
-    borderRadius: 5,
-    padding: 5,
-  },
-  markerText: {
-    color: '#fff',
-  },
-})

example/src/examples/multi-point.js → example/examples/multi-point.js

-import React, {Component} from 'react'
-import {StyleSheet, Alert} from 'react-native'
-import {MapView, MultiPoint} from 'react-native-amap3d'
+import React, { Component } from 'react'
+import { StyleSheet, Alert } from 'react-native'
+import { MapView, MultiPoint } from 'react-native-amap3d'
 
 export default class MultiPointExample extends Component {
   static navigationOptions = {
     title: '海量点',
   }
 
-  _points = Array(1000).fill(0).map(i => ({
+  _points = Array(1000).fill(0).map(() => ({
     latitude: 39.5 + Math.random(),
     longitude: 116 + Math.random(),
   }))
@@ -15,13 +15,15 @@ export default class MultiPointExample extends Component {
   _onItemPress = point => Alert.alert(this._points.indexOf(point).toString())
 
   render() {
-    return <MapView zoomLevel={12} style={StyleSheet.absoluteFill}>
-      <MultiPoint
-        image='point'
-        points={this._points}
-        onItemPress={this._onItemPress}
-      />
-    </MapView>
+    return (
+      <MapView zoomLevel={12} style={StyleSheet.absoluteFill}>
+        <MultiPoint
+          image="point"
+          points={this._points}
+          onItemPress={this._onItemPress}
+        />
+      </MapView>
+    )
   }
 }
 

example/src/examples/navigation.js → example/examples/navigation.js

-import React, {Component} from 'react'
-import {StyleSheet} from 'react-native'
-import {Navigation} from 'react-native-amap3d'
+import React, { Component } from 'react'
+import { StyleSheet } from 'react-native'
+import { Navigation } from 'react-native-amap3d'
 
 export default class NavigationExample extends Component {
   static navigationOptions = {
@@ -22,17 +22,19 @@ export default class NavigationExample extends Component {
           latitude: 39.866901,
           longitude: 116.407972,
         },
-      ]
+      ],
     )
   }
 
   _start = () => this._navigation.start()
 
   render() {
-    return <Navigation.Drive
-      ref={ref => this._navigation = ref}
-      style={StyleSheet.absoluteFill}
-      onCalculateRouteSuccess={this._start}
-    />
+    return (
+      <Navigation.Drive
+        ref={ref => this._navigation = ref}
+        style={StyleSheet.absoluteFill}
+        onCalculateRouteSuccess={this._start}
+      />
+    )
   }
 }

example/src/examples/offline.js → example/examples/offline.js

-import React, {Component} from 'react'
-import {Offline} from 'react-native-amap3d'
+import { Component } from 'react'
+import { Offline } from 'react-native-amap3d'
 
 // TODO: 提供完整的离线地图示例
 export default class IndoorExample extends Component {

example/src/examples/polygon.js → example/examples/polygon.js

-import React, {Component} from 'react'
-import {StyleSheet} from 'react-native'
-import {MapView, Polygon} from 'react-native-amap3d'
+import React, { Component } from 'react'
+import { StyleSheet } from 'react-native'
+import { MapView, Polygon } from 'react-native-amap3d'
 
 export default class PolygonExample extends Component {
   static navigationOptions = {
@@ -23,12 +23,15 @@ export default class PolygonExample extends Component {
   ]
 
   render() {
-    return <MapView style={StyleSheet.absoluteFill}>
-      <Polygon
-        strokeWidth={5}
-        strokeColor='rgba(0, 0, 255, 0.5)'
-        fillColor='rgba(255, 0, 0, 0.5)'
-        coordinates={this._coordinates}/>
-    </MapView>
+    return (
+      <MapView style={StyleSheet.absoluteFill}>
+        <Polygon
+          strokeWidth={5}
+          strokeColor="rgba(0, 0, 255, 0.5)"
+          fillColor="rgba(255, 0, 0, 0.5)"
+          coordinates={this._coordinates}
+        />
+      </MapView>
+    )
   }
 }

example/src/examples/polyline.js → example/examples/polyline.js

-import React, {Component} from 'react'
-import {StyleSheet, Alert} from 'react-native'
-import {MapView, Polyline} from 'react-native-amap3d'
+import React, { Component } from 'react'
+import { StyleSheet, Alert } from 'react-native'
+import { MapView, Polyline } from 'react-native-amap3d'
 
 export default class PolylineExample extends Component {
   static navigationOptions = {
@@ -51,21 +51,26 @@ export default class PolylineExample extends Component {
   _onPress = () => Alert.alert('onPress')
 
   render() {
-    return <MapView style={StyleSheet.absoluteFill}>
-      <Polyline
-        width={5}
-        color='rgba(255, 0, 0, 0.5)'
-        coordinates={this._line1}/>
-      <Polyline
-        dashed
-        width={5}
-        coordinates={this._line2}/>
-      <Polyline
-        gradient
-        width={5}
-        colors={['#f44336', '#2196f3', '#4caf50']}
-        onPress={this._onPress}
-        coordinates={this._line3}/>
-    </MapView>
+    return (
+      <MapView style={StyleSheet.absoluteFill}>
+        <Polyline
+          width={5}
+          color="rgba(255, 0, 0, 0.5)"
+          coordinates={this._line1}
+        />
+        <Polyline
+          dashed
+          width={5}
+          coordinates={this._line2}
+        />
+        <Polyline
+          gradient
+          width={5}
+          colors={['#f44336', '#2196f3', '#4caf50']}
+          onPress={this._onPress}
+          coordinates={this._line3}
+        />
+      </MapView>
+    )
   }
 }

example/index.js

-import {AppRegistry} from 'react-native'
-import App from './src/app'
-AppRegistry.registerComponent('RNAMap3D', () => App)
+import { Platform } from 'react-native'
+import { StackNavigator } from 'react-navigation'
+import Examples from './examples'
+import MapTypes from './examples/map-types'
+import Layers from './examples/layers'
+import Indoor from './examples/indoor'
+import Animated from './examples/animated'
+import Controls from './examples/controls'
+import Gestures from './examples/gestures'
+import Marker from './examples/marker'
+import Polyline from './examples/polyline'
+import Polygon from './examples/polygon'
+import Circle from './examples/circle'
+import Events from './examples/events'
+import Offline from './examples/offline'
+import Navigation from './examples/navigation'
+import HeatMap from './examples/heat-map'
+import MultiPoint from './examples/multi-point'
+
+export default StackNavigator({
+  Examples: { screen: Examples },
+  MapTypes: { screen: MapTypes },
+  Layers: { screen: Layers },
+  Indoor: { screen: Indoor },
+  Animated: { screen: Animated },
+  Controls: { screen: Controls },
+  Gestures: { screen: Gestures },
+  Marker: { screen: Marker },
+  Polyline: { screen: Polyline },
+  Polygon: { screen: Polygon },
+  Circle: { screen: Circle },
+  Events: { screen: Events },
+  Offline: { screen: Offline },
+  Navigation: { screen: Navigation },
+  HeatMap: { screen: HeatMap },
+  MultiPoint: { screen: MultiPoint },
+}, {
+  navigationOptions: {
+    headerTintColor: '#212121',
+    headerStyle: {
+      ...Platform.select({
+        ios: {
+          backgroundColor: '#fff',
+        },
+        android: {
+          backgroundColor: '#f5f5f5',
+        },
+      }),
+    },
+  },
+})

example/package.json

-{
-  "private": true,
-  "scripts": {
-    "start": "node node_modules/react-native/local-cli/cli.js start",
-    "reload": "adb reverse tcp:8081 tcp:8081 && adb shell input text rr",
-    "run-android": "node node_modules/react-native/local-cli/cli.js run-android",
-    "log-android": "node node_modules/react-native/local-cli/cli.js log-android",
-    "run-ios": "node node_modules/react-native/local-cli/cli.js run-ios"
-  },
-  "dependencies": {
-    "react": "16.0.0",
-    "react-native": "0.51.0",
-    "react-native-amap3d": "*",
-    "react-navigation": "^1.0.0-beta.23"
-  },
-  "devDependencies": {
-    "babel-preset-react-native": "^4.0.0"
-  },
-  "presets": [
-    "react-native"
-  ]
-}

example/src/app.js

-import {Platform} from 'react-native'
-import {StackNavigator} from 'react-navigation'
-import Examples from './examples'
-import MapTypes from './examples/map-types'
-import Layers from './examples/layers'
-import Indoor from './examples/indoor'
-import Animated from './examples/animated'
-import Controls from './examples/controls'
-import Gestures from './examples/gestures'
-import Marker from './examples/marker'
-import Polyline from './examples/polyline'
-import Polygon from './examples/polygon'
-import Circle from './examples/circle'
-import Events from './examples/events'
-import Offline from './examples/offline'
-import Navigation from './examples/navigation'
-import HeatMap from './examples/heat-map'
-import MultiPoint from './examples/multi-point'
-
-export default StackNavigator({
-  Examples: {screen: Examples},
-  MapTypes: {screen: MapTypes},
-  Layers: {screen: Layers},
-  Indoor: {screen: Indoor},
-  Animated: {screen: Animated},
-  Controls: {screen: Controls},
-  Gestures: {screen: Gestures},
-  Marker: {screen: Marker},
-  Polyline: {screen: Polyline},
-  Polygon: {screen: Polygon},
-  Circle: {screen: Circle},
-  Events: {screen: Events},
-  Offline: {screen: Offline},
-  Navigation: {screen: Navigation},
-  HeatMap: {screen: HeatMap},
-  MultiPoint: {screen: MultiPoint},
-}, {
-  navigationOptions: {
-    headerTintColor: '#212121',
-    headerStyle: {
-      ...Platform.select({
-        ios: {
-          backgroundColor: '#fff',
-        },
-        android: {
-          backgroundColor: '#f5f5f5',
-        },
-      })
-    },
-  },
-})

example/src/examples/controls.js

-import React, {Component} from 'react'
-import {StyleSheet, Switch, Text, View} from 'react-native'
-import MapView from 'react-native-amap3d'
-import styles from '../styles'
-
-export default class ControlsExample extends Component {
-  static navigationOptions = {
-    title: '地图控件',
-  }
-
-  state = {
-    showsCompass: false,
-    showsScale: true,
-    showsZoomControls: true,
-    showsLocationButton: false,
-  }
-
-  render() {
-    return <View style={StyleSheet.absoluteFill}>
-      <View style={styles.controls}>
-        <View style={styles.control}>
-          <Text>指南针</Text>
-          <Switch
-            style={styles.switch}
-            onValueChange={showsCompass => this.setState({showsCompass})}
-            value={this.state.showsCompass}/>
-        </View>
-        <View style={styles.control}>
-          <Text>比例尺</Text>
-          <Switch
-            style={styles.switch}
-            onValueChange={showsScale => this.setState({showsScale})}
-            value={this.state.showsScale}/>
-        </View>
-        <View style={styles.control}>
-          <Text>定位</Text>
-          <Switch
-            style={styles.switch}
-            onValueChange={showsLocationButton => this.setState({showsLocationButton})}
-            value={this.state.showsLocationButton}/>
-        </View>
-        <View style={styles.control}>
-          <Text>缩放</Text>
-          <Switch
-            style={styles.switch}
-            onValueChange={showsZoomControls => this.setState({showsZoomControls})}
-            value={this.state.showsZoomControls}/>
-        </View>
-      </View>
-      <MapView
-        locationEnabled={this.state.showsLocationButton}
-        showsCompass={this.state.showsCompass}
-        showsScale={this.state.showsScale}
-        showsLocationButton={this.state.showsLocationButton}
-        showsZoomControls={this.state.showsZoomControls}
-        style={styles.map}/>
-    </View>
-  }
-}

example/src/examples/gestures.js

-import React, {Component} from 'react'
-import {StyleSheet, View, Text, Switch} from 'react-native'
-import MapView from 'react-native-amap3d'
-import styles from '../styles'
-
-export default class GesturesExample extends Component {
-  static navigationOptions = {
-    title: '手势交互',
-  }
-
-  state = {
-    zoomEnabled: true,
-    scrollEnabled: true,
-    rotateEnabled: true,
-    tiltEnabled: true,
-  }
-
-  render() {
-    return <View style={StyleSheet.absoluteFill}>
-      <View style={styles.controls}>
-        <View style={styles.control}>
-          <Text>旋转</Text>
-          <Switch
-            style={styles.switch}
-            onValueChange={rotateEnabled => this.setState({rotateEnabled})}
-            value={this.state.rotateEnabled}/>
-        </View>
-        <View style={styles.control}>
-          <Text>滑动</Text>
-          <Switch
-            style={styles.switch}
-            onValueChange={scrollEnabled => this.setState({scrollEnabled})}
-            value={this.state.scrollEnabled}/>
-        </View>
-        <View style={styles.control}>
-          <Text>缩放</Text>
-          <Switch
-            style={styles.switch}
-            onValueChange={zoomEnabled => this.setState({zoomEnabled})}
-            value={this.state.zoomEnabled}/>
-        </View>
-        <View style={styles.control}>
-          <Text>倾斜</Text>
-          <Switch
-            style={styles.switch}
-            onValueChange={tiltEnabled => this.setState({tiltEnabled})}
-            value={this.state.tiltEnabled}/>
-        </View>
-      </View>
-      <MapView
-        zoomEnabled={this.state.zoomEnabled}
-        scrollEnabled={this.state.scrollEnabled}
-        rotateEnabled={this.state.rotateEnabled}
-        tiltEnabled={this.state.tiltEnabled}
-        style={styles.map}/>
-    </View>
-  }
-}

example/src/examples/map-types.js

-import React, {Component} from 'react'
-import {StyleSheet, Picker} from 'react-native'
-import MapView from 'react-native-amap3d'
-
-export default class MapTypesExample extends Component {
-  static navigationOptions = ({navigation}) => {
-    const {state, setParams} = navigation
-    state.params = state.params || {mapType: 'standard'}
-    return {
-      title: '地图模式',
-      headerRight: <Picker
-        mode='dropdown'
-        style={{width: 100}}
-        selectedValue={state.params.mapType}
-        onValueChange={mapType => setParams({mapType})}>
-        <Picker.Item label='标准' value='standard'/>
-        <Picker.Item label='卫星' value='satellite'/>
-        <Picker.Item label='导航' value='navigation'/>
-        <Picker.Item label='夜间' value='night'/>
-        <Picker.Item label='公交' value='bus'/>
-      </Picker>,
-    }
-  }
-
-  render() {
-    return <MapView
-      mapType={this.props.navigation.state.params.mapType}
-      style={StyleSheet.absoluteFill}/>
-  }
-}

example/src/styles.js → example/styles.js

-import {StyleSheet, Platform} from 'react-native'
+import { StyleSheet, Platform } from 'react-native'
 
 export default StyleSheet.create({
   map: {

index.js

+import { AppRegistry } from 'react-native'
+import App from './example'
+
+AppRegistry.registerComponent('RNAMap3D', () => App)

example/ios/Podfile → ios/Podfile

 platform :ios, '8.0'
 
 target 'RNAMap3D' do
-  pod 'yoga', path: '../node_modules/react-native/ReactCommon/yoga/'
   pod 'React', path: '../node_modules/react-native/'
-  pod 'react-native-amap3d', path: '../../ios/'
+  pod 'yoga', path: '../node_modules/react-native/ReactCommon/yoga/'
+  pod 'react-native-amap3d', path: '../lib/ios/'
 end

lib/android/build.gradle

+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+
+buildscript {
+    ext.kotlin_version = '1.2.21'
+
+    repositories {
+        jcenter()
+    }
+
+    dependencies {
+        classpath 'com.android.tools.build:gradle:2.2.3'
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+    }
+}
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        minSdkVersion 16
+        targetSdkVersion 22
+    }
+}
+
+dependencies {
+    provided 'com.facebook.react:react-native:+'
+    compile 'com.amap.api:navi-3dmap:5.3.0_3dmap5.3.0'
+    compile "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+}

android/src/main/AndroidManifest.xml → lib/android/src/main/AndroidManifest.xml

@@ -9,6 +9,6 @@
     <uses-permission android:name="android.permission.READ_PHONE_STATE" />
     <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
-    <uses-permission android:name="android.permission.WAKE_LOCK"/>
+    <uses-permission android:name="android.permission.WAKE_LOCK" />
 
 </manifest>

android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapMarker.kt → lib/android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapMarker.kt

@@ -137,7 +137,7 @@ class AMapMarker(context: Context) : ReactViewGroup(context), AMapOverlay {
         icon?.let {
             if (it.width != 0 && it.height != 0) {
                 val bitmap = Bitmap.createBitmap(
-                    it.width, it.height, Bitmap.Config.ARGB_8888)
+                        it.width, it.height, Bitmap.Config.ARGB_8888)
                 it.draw(Canvas(bitmap))
                 bitmapDescriptor = BitmapDescriptorFactory.fromBitmap(bitmap)
                 marker?.setIcon(bitmapDescriptor)

android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapMultiPointManager.kt → lib/android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapMultiPointManager.kt

 package cn.qiuxiang.react.amap3d.maps
 
 import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.common.MapBuilder
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext

android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapView.kt → lib/android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapView.kt

@@ -238,7 +238,7 @@ class AMapView(context: Context) : TextureMapView(context) {
 
         if (style.hasKey("image")) {
             val drawable = context.resources.getIdentifier(
-                style.getString("image"), "drawable", context.packageName)
+                    style.getString("image"), "drawable", context.packageName)
             locationStyle.myLocationIcon(BitmapDescriptorFactory.fromResource(drawable))
         }
     }