[译]React Native 开源百度地图组件 (react-native-baidumap-kit)

尊重版权,未经授权不得转载

本文来自:江清清的技术专栏-翻译组(www.lcode.org)

翻译计划项目:github.com/jiangqqlmj/…

开源项目地址:github.com/hufeng/Baid…

项目介绍

该组件进行封装原生平台的百度地图控件,当前适配Android开发。原作者还在继续完善功能。

刚创建的React Native技术交流3群(496508742)欢迎各位大牛,React Native技术爱好者加入交流!

配置安装

1.NPM install

npm install baidumapkit --save

2.更新Gradle设置

// file: android/settings.gradle
...

include ':baidumapkit',  ':app'
project(':baidumapkit').projectDir = new File(rootProject.projectDir, '../node_modules/baidumapkit')

3.更新App Gradle 编译文件

// file: android/app/build.gradle
...

dependencies {
    ...
    compile project(':baidumapkit')
}

4.注册React Package

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

  private ReactInstanceManager mReactInstanceManager;
  private ReactRootView mReactRootView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      //初始化百度地图
      SDKInitializer.initialize(getApplicationContext());

      mReactRootView = new ReactRootView(this);
      mReactInstanceManager = ReactInstanceManager.builder()
              .setApplication(getApplication())
              .setBundleAssetName("index.android.bundle")
              .setJSMainModuleName("index.android")
              .addPackage(new MainReactPackage())
              .addPackage(new BaiduMapReactPackage(this)) // <-- Register package here
              .setUseDeveloperSupport(true)
              .setInitialLifecycleState(LifecycleState.RESUMED)
              .build();

      mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProj", null);
      setContentView(mReactRootView);
  }

5.更新AndroidManifest.xml配置文件,填写相关appkey

使用代码

'use strict';

import React, {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

import BaiduMap from 'baidumapkit';

class BaiduMapExample extends React.Component {
  render() {
    return (
      
        
          React Native Baidu MapView!
        
        
      
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    color: 'red',
    textAlign: 'center',
    margin: 10,
  }
});

AppRegistry.registerComponent('BaiduMapExample', () => BaiduMapExample);

运行效果

查看图片