原生安卓[Android]项目中集成RN[React Native]项目

说明

开发环境

集成步骤

总结

1.说明：

1.基于对RN技术的跨平台性及代码的简洁性我对RN产生浓厚的兴趣

2.这是我人生的第一篇博客写得不好的希望各位读者谅解

3.本人在写这篇博客的时候查阅过大量的资料，花了两天时间才彻底搞清楚在原生Android项目集成RN技术

4.本篇博客主要做笔记用方便日后回顾同时也可以为在集成RN项目中遇到各种坑的读者提供参考

2.开发环境：

Windows7 64位

Android Studio2.2.2

Build Tools 23.0.1

API 23: Android 6.0 (Marshmallow)

compile “com.facebook.react:react-native:+”

RN开发工具Atom

3.集成步骤

1.通过RN中文网http://reactnative.cn/docs/0.42/getting-started.html#content搭建开发环境【按照步骤一步一步操作基本没什么坑】

2.通过命令行进入到需要创建项目的文件夹

3.通过react-native init XXX[项目名称]创建我们的项目【为了确保后续操作无误,先通过react-native run-android命令运行到模拟器或者真机上看看能否成功运行，此过程可能会出现白屏，【白屏情况是因为没有获取悬浮窗权限到系统应用权限进行授权即可】】

4.在确保项目能正常运行到安卓模拟器或者真机的情况下删除编译生成的build文件夹将项目根目录文件夹导入studio中

5.在app/src/java/文件夹下创建assets文件夹

6.在studio下的命令行终端或者Windows命令行终端执行react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –sourcemap-output android/app/src/main/assets/index.android.map –assets-dest android/app/src/main/res/

PS:项目文件夹名称自己对应好

7.通过npm start开启服务器端

8.如果没有出错的情况下应该可以运行到手机中但是出现红屏错误提示或者是白屏【白屏情况是因为没有获取悬浮窗权限到系统应用权限进行授权即可】

9.配置Dev Settings：摇动手机在弹出的菜单中点击Dev Settings继续选择Debug server host & port for device

10.在Windows命令行中输入ipconfig获取IPV4地址填入Debug server host & port弹出窗口中并在后面加上：8081端口号【默认是8081】

11.返回红屏界面摇动手机并Reload成功显示RN界面

4.总结

1.根据RN中文网官方教程http://reactnative.cn/docs/0.42/integration-with-existing-apps.html#content集成开发环境，经多次尝试失败笔者决定放弃

2.温馨提示：读者在自己集成过程中可能会遇到各种坑，注意看几个地方的log错误提示：

1.Event Log

2.Grande Console

3.看手机上的红屏错误提示

4.命令行错误提示

3.根据此步骤还是不能成功集成的可以加好友互相学习，互相讨论 QQ：1294432350

PS：仔细查看错误提示你会发现，解决问题的办法在Log日志中有很多的提示信息，避免走弯路