RN集成react-native-baidu-map及解决遇到的问题

Posted 2023-03-22

参考技术A 创建一个React-native项目，并加入百度地图的插件的方法：

1，react-native init --version="0.55.4" BaiduMapDemo  //新建一个目录，创建名为 BaiduMapDemo 的项目，

出现如图所示：

2，cd BaiduMapDemo //进入BaiduMapDemo 下

3，yarn add react-native-baidu-map 或者 npm install react-native-baidu-map--save 添加react-native-baidu-map插件 （安装开源项目库）

4，配置index.js

APP是默认的项目名称，这里创建项目时，项目名称是BaiduMapDemo，

5，setting.gradle中添加：

include':react-native-baidu-map'project(':react-native-baidu-map').projectDir =newFile(settingsDir,'../node_modules/react-native-baidu-map/android')

6，app/build.gradle的dependencies中添加

7，MainApplication.java中添加：

8，在AndroidMainifest.xml中添加，注意：权限不要重复添加，react-native编译有时不通过。

9，application标签内添加

10，然后，编译一下，发现项目中会出现react-native-baidu-map模块，会报错，

然后解决问题：

1，createJSModules不是重写方法

2，WebView的修改：

从React15.5起，React.PropTypes被移入到单独的package中。react提供了一个package(prop-types)去检查props的类型。首先需要将prop-types引用到文件中。

更改项目中对组件原的引用方式，在此项目中需要在node_modules\react-native-baidu-map\js\MapView.js文件中

3， 项目能运行，地图不显示。

主要因为keystore和及其配置。

把keystore拷贝到 项目\android\keystores目录下，

并在 项目\android\app\build.gradle中配置

(4) 提示MainActivity不存在 Activity is not exist

项目\android\app\src\main\AndroidManifest.xml中的 package

与 项目\android\app\build.gradle中的applicationId保持一致。

然后就饿没有问题了，百度地图的API_KEY自己生成添加进项目的Application中就行了.

RN与现有的原生app集成

https://facebook.github.io/react-native/docs/integration-with-existing-apps.html

　　RN可以很好地支持往一个原生的app上添加RN的组件。通过简单的步骤，我们可以添加RN基础的特征、组件等。后面以android为例。

关键思想

1. 设置RN的依赖和结构目录
2. 用JS开发RN组件
3. 添加一个ReactRootView到android app上，这会作为RN组件的容器
4. 开启RN服务器和运行原生app
5. 检查RN组件是否正常工作

预备知识

　　按照官方指引，设置好RN开发环境。

1. 设置目录结构。把android项目复制到RN项目根目录下的android文件夹中（初始化的RN项目中就已经有这样一个文件夹了，里面有初始的android项目内容）
2. 安装JS依赖。在RN项目创建一个package.json，内容如下（初始的RN项目也有这些内容了）

   {
     "name": "MyReactNativeApp",
     "version": "0.0.1",
     "private": true,
     "scripts": {
       "start": "node node_modules/react-native/local-cli/cli.js start"
     }
   }

   然后安装react和react-native依赖

   npm install --save [email protected] react-native

把RN添加到app中

配置maven仓库

　　把RN依赖添加到build.gradle中（如果想使用指定版本的RN，可以将+替换为npm中对应的RN版本号）：

dependencies {
    compile ‘com.android.support:appcompat-v7:23.0.1‘
    ...
    compile "com.facebook.react:react-native:+" // From node_modules.
}

　　光光以上这么配置，gradle会（？）找不到这个依赖，需要在build.gradle中配置一个仓库告诉gradle去哪里找依赖（确保添加到allproject这个块中，而且要在所有其他maven仓库之上。同时确保下面的url是正确的）：

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        ...
    }
    ...
}

配置权限

　　往AndroidManifest.xml清单文件中加上：

<uses-permission android:name="android.permission.INTERNET" />

　　如果需要在原生app中打开开发者菜单，也需要在清单文件中加上（如果要发布则把下面这行去掉）：

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

代码集成