React Native集成到Android项目当中

集成到Android项目当中

安装JavaScript依赖包

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

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

version字段没有太大意义（除非你要把你的项目发布到npm仓库）。scripts中是用于启动packager服务的命令。dependencies中的react和react-native的版本取决于你的具体需求。一般来说我们推荐使用最新版本。
可以使用
npm info react
例如:

和
npm info react-native

来查看当前的最新版本。另外，react-native对react的版本有严格要求，高于或低于某个范围都不可以。

除此之外还有一种方式创建package.json

在Android Studio的下打开Terminal命令行，输入npm init 如图

依次输入相关内容

最后会根据你输入的内容生成一个package.json
内容如下：

生成之后可以看到根目录当中增加了一个文件

完成之后 我们执行npm install命令 执行之后
我们可以看到命令正在执行

整个过程相对较慢
如果你安装了yarn 则可以直接执行yarn 相对npm install 这个过程会快一些

成功之后
我们会发现目录当中增加一个 /node_modules 文件夹，里面是所有需要的 JavaScript 依赖，可以打开查看一下，内容非常多。

接下来我们要把React Native集成到我们的应用当中
配置maven
在你的app中build.gradle 文件中添加 React Native 依赖:

dependencies {
     ...
     compile "com.facebook.react:react-native:+" // From node_modules.
 }

如果想要指定特定的React Native版本，可以用具体的版本号替换 +，当然前提是你从npm里下载的是这个版本 。
接下来在项目中的build.gradle 文件中为 React Native 添加一个 maven 依赖的入口，必须写在 "allprojects" 代码块中:
例如：

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

注意这里的"$rootDir/../node_modules/react-native/android"必须写对了 如果路径写错了在运行Gradle同步构建的时候就会抛出“Failed to resolve: com.facebook.react:react-native:0.x.x" 异常。
查看项目中有node_modules，说明react和react native 安装完成。

添加.flowconfig

下载flowconfig文件

curl
-o .flowconfig [https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig](https://link.jianshu.com/?t=https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig)

在项目根目录添加.flowconfig
也可以手动创建在浏览器
https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
网址复制内容创建文件
添加

"start": "node node_modules/react-native/local-cli/cli.js 

到package.json文件下scripts标签

修改前 如图

修改后 如图

接着，在 AndroidManifest.xml 清单文件中声明网络权限:
<uses-permission android:name="android.permission.INTERNET" />
如果需要访问 DevSettingsActivity 界面（即开发者菜单），则还需要在 AndroidManifest.xml 中声明:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
开发者菜单一般仅用于在开发时从Packager服务器刷新JavaScript代码，所以在正式发布时你可以去掉这一权限。

文末送福利啦！！

同时我经过多年的收藏目前也算收集到了一套完整的学习资料以及高清详细的Android架构进阶学习导图及笔记免费分享给大家，希望对想成为架构师的朋友有一定的参考和帮助。
下面是部分资料截图，诚意满满：特别适合有开发经验的Android程序员们学习。

资料免费领取方式：现在关注我并且加入群聊
群号：1018342383
或者是点击链接加入群聊【Android开发交流】：https://jq.qq.com/?_wv=1027&k=5WjVzJT

转载于:https://blog.51cto.com/14332859/2399738