Android项目集成ReactNative及遇到问题

开发环境准备

首先按照开发环境搭建来安装 React Native 在 Android 平台上所需的一切依赖软件。

配置项目目录

在已有的android项目下面创建rn文件夹（目录名自定义）

image.png

安装 JavaScript 依赖包

在项目根目录下创建一个名为package.json的空文本文件，然后填入以下内容：

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

示例中的version字段没有太大意义（除非你要把你的项目发布到 npm 仓库）。scripts中是用于启动 packager 服务的命令。

接下来我们使用 yarn 或 npm（两者都是 node 的包管理器）来安装 React 和 React Native 模块。请打开一个终端/命令提示行，进入到项目目录中（即包含有 package.json 文件的目录），然后运行下列命令来安装：

yarn add react-native

这样默认会安装最新版本的 React Native，同时会打印出类似下面的警告信息（你可能需要滚动屏幕才能注意到）：

warning "[email protected]" has unmet peer dependency "[email protected]".

这是正常现象，意味着我们还需要安装指定版本的 React：

yarn add [email protected]

注意必须严格匹配警告信息中所列出的版本，高了或者低了都不可以。

React Native 添加到你的应用中

配置 maven

在你的 app 中 build.gradle 文件中添加 React Native 依赖:

dependencies {
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile "com.facebook.react:react-native:+" 
}

在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口，必须写在 "allprojects" 代码块中:

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

其余的配置我们都可以根据react native官网提供的文档进行完善和运行，接下来主要说一下我在运行时候遇到的一些问题。

运行问题

1. 运行程序打开reactActivity时报错如下：

java.lang.UnsatisfiedLinkError: dlopen failed: "xxx/libgnustl_shared.so" is 32-bit instead of 64-bit

解决：在application的build.gradle里面增加如下配置：

defaultConfig {
        ndk {
            abiFilters "armeabi-v7a"
        }
    }

2. 打开ReactActivity显示一片红，错误如下:

could not connect to development sever

解决方法如下：

1.摇一摇打开dev界面，选择【Dev Settings】
2.选择【Debug server host & port for device 】
3.输入：主机ip:8080（如10.0.8.87:8081）