初步实现地图显示

.gitignore

-.idea/
-node_modules/
+# OSX
+#
\ No newline at end of file
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
+
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots

.npmignore

+example/
\ No newline at end of file

android/build.gradle

@@ -28,5 +28,6 @@ repositories {
 
 dependencies {
     compile 'com.facebook.react:react-native:+'
+    compile 'com.amap.api:3dmap:latest.integration'
 }
   
\ No newline at end of file

android/src/main/java/com/qiuxiang/AMap3DModule.java

-package com.qiuxiang;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.bridge.Callback;
-
-public class AMap3DModule extends ReactContextBaseJavaModule {
-    private final ReactApplicationContext reactContext;
-
-    public AMap3DModule(ReactApplicationContext reactContext) {
-        super(reactContext);
-        this.reactContext = reactContext;
-    }
-
-    @Override
-    public String getName() {
-        return "AMap3D";
-    }
-}
\ No newline at end of file

android/src/main/java/com/qiuxiang/AMap3DPackage.java

@@ -13,7 +13,7 @@ import com.facebook.react.bridge.JavaScriptModule;
 public class AMap3DPackage implements ReactPackage {
     @Override
     public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
-        return Arrays.<NativeModule>asList(new AMap3DModule(reactContext));
+        return Collections.emptyList();
     }
 
     @Override
@@ -23,6 +23,6 @@ public class AMap3DPackage implements ReactPackage {
 
     @Override
     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-        return Collections.emptyList();
+        return Arrays.<ViewManager>asList(new AMapViewManager());
     }
 }
\ No newline at end of file

android/src/main/java/com/qiuxiang/AMapView.java

+package com.qiuxiang;
+
+import android.content.Context;
+import android.location.Location;
+
+import com.amap.api.maps.AMap;
+import com.amap.api.maps.MapView;
+
+public class AMapView extends MapView {
+    private final AMap amap;
+
+    public AMapView(Context context) {
+        super(context);
+        super.onCreate(null);
+        amap = this.getMap();
+    }
+
+    public AMap getMap() {
+        return amap;
+    }
+
+//    public Location getMyLocation() {
+//        Location location = amap.getMyLocation();
+//        return location;
+//    }
+
+    public void setMyLocationEnabled(boolean enabled) {
+        amap.setMyLocationEnabled(enabled);
+    }
+}

android/src/main/java/com/qiuxiang/AMapViewManager.java

+package com.qiuxiang;
+
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+class AMapViewManager extends SimpleViewManager<AMapView> {
+    @Override
+    public String getName() {
+        return "AMapView";
+    }
+
+    @Override
+    protected AMapView createViewInstance(ThemedReactContext reactContext) {
+        return new AMapView(reactContext);
+    }
+
+    @ReactProp(name = "showUserLocation")
+    public void setMyLocationEnabled(AMapView view, boolean enabled) {
+        view.getMap().setMyLocationEnabled(enabled);
+    }
+}

example/.gitignore

-# OSX
-#
-.DS_Store
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IntelliJ
-#
-build/
-.idea
-.gradle
-local.properties
-*.iml
-
-# node.js
-#
-node_modules/
-npm-debug.log
-yarn-error.log
-
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-
-# fastlane
-#
-# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
-# screenshots whenever they are needed.
-# For more information about the recommended setup visit:
-# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
-
-fastlane/report.xml
-fastlane/Preview.html
-fastlane/screenshots

example/android/app/build.gradle

@@ -126,6 +126,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-amap3d')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules

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

@@ -6,6 +6,21 @@
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
+
+    //地图包、搜索包需要的基础权限
+    <!--允许程序打开网络套接字-->
+    <uses-permission android:name="android.permission.INTERNET" />
+    <!--允许程序设置内置sd卡的写权限-->
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <!--允许程序获取网络状态-->
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <!--允许程序访问WiFi网络信息-->
+    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
+    <!--允许程序读写手机状态和身份-->
+    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
+    <!--允许程序访问CellID或WiFi热点来获取粗略的位置-->
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+
     <uses-sdk
         android:minSdkVersion="16"
         android:targetSdkVersion="22" />
@@ -27,6 +42,9 @@
         </intent-filter>
       </activity>
       <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+        <meta-data
+            android:name="com.amap.api.v2.apikey"
+            android:value="f5010319a1b18b0b1221c77d45caae69" />
     </application>
 
 </manifest>

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

@@ -3,6 +3,7 @@ package com.example;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.qiuxiang.AMap3DPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -22,7 +23,8 @@ public class MainApplication extends Application implements ReactApplication {
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-          new MainReactPackage()
+          new MainReactPackage(),
+            new AMap3DPackage()
       );
     }
   };

example/android/settings.gradle

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

example/app.js

+import React, {Component} from 'react'
+import {Text} from 'react-native'
+import AMapView from 'react-native-amap3d'
+
+export default class Example extends Component {
+  render() {
+    return <AMapView style={{flex: 1}}/>
+  }
+}

example/index.android.js

-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
-import React, { Component } from 'react';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-
-export default class Example extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Double tap R on your keyboard to reload,{'\n'}
-          Shake or press menu button for dev menu
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('Example', () => Example);
+import React, {Component} from 'react'
+import {AppRegistry} from 'react-native'
+import App from './app'
+AppRegistry.registerComponent('Example', () => App)

example/index.ios.js

-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
-import React, { Component } from 'react';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-
-export default class Example extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('Example', () => Example);
+import React, {Component} from 'react'
+import {AppRegistry} from 'react-native'
+import App from './app'
+AppRegistry.registerComponent('Example', () => App)

example/package.json

@@ -8,7 +8,8 @@
 	},
 	"dependencies": {
 		"react": "16.0.0-alpha.6",
-		"react-native": "0.44.0"
+		"react-native": "0.44.0",
+    "react-native-amap3d": ".."
 	},
 	"devDependencies": {
 		"babel-jest": "20.0.3",

index.js

-import {NativeModules} from 'react-native'
-const {AMap3D} = NativeModules
-export default AMap3D
+import {requireNativeComponent} from 'react-native'
+import {View} from 'react-native'
+
+export default requireNativeComponent('AMapView', {
+  name: 'AMapView',
+  propTypes: {
+    ...View.propTypes,
+  },
+})