A React Native component for building maps with the AMap Android SDK.
...
import MapView from 'react-native-amap';
class example extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<MapView mode={1} style={{ flex: 1, width: 300, }} />
</View>
);
}
}
...
npm install react-native-amap --save
// file: android/settings.gradle
...
include ':reactamap'
project(':reactamap').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-amap')
// file: android/app/build.gradle
...
dependencies {
...
compile project(':reactamap')
}
import com.laoqiu.amap.AMapReactPackage;
...
/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new AMapReactPackage()); // <-- Register package here
}
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
...
.addPackage(new AMapReactPackage()) // <-- Register package here
...
.build();
...
// file: android/app/src/main/AndroidManifest.xml
...
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<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.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<application
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme">
<meta-data
android:name="com.amap.api.v2.apikey"
android:value="your app key here"/>
...