这是lz 成功在原有项目上集成的第一个ReactNative 项目.
参考官方网址: http://reactnative.cn/docs/0.43/integration-with-existing-apps.html#content

Lz 寄语: 写在前面的:
1)APP 的build.gradle 最小sdk>=16

2)关于乱码问题, index.andorid.js文件应该F12另存为UTF-8 无 BOM 格式

3)每次修改JS文件后, 第一次运行之前, 可能需要删除build 文件

4)第一次可能无法运行, 无法连接到服务器, 这是因为需要npm start , 然后reload 即可,

5)在Genymation中, RR可能失效, 无法重载

把React Native组件植入到Android应用中有如下几个主要步骤:
1.首先当然要了解你要植入的React Native组件。
2.在Android项目根目录中使用npm来安装react-native ,这样同时会创建一个node_modules/的目录。
3.创建js文件,编写React Native组件的js代码。
4.在build.gradle文件中添加com.facebook.react:react-native:+,以及一个指向node_nodules/目录中的react-native预编译库的maven路径。
5.创建一个React Native专属的Activity,在其中再创建ReactRootView。
6.启动React Native的Packager服务,运行应用。
7.根据需要添加更多React Native的组件。
8.在真机上运行、调试。
9.打包。
10.发布应用,升职加薪,走向人生巅峰!

(一)开发环境准备, 详细参照<关于ReactNativieAndroid配置>
(二)在项目中添加JS代码
a)打开doc 命令行
b)Cd / 回退到根目录;
c)E: 目标盘符, 这里举例用E盘;
d)Cd E:\lzAndroidWorkSpace\ReactNativeWorkSpace\Test 目标项目的根目录
i.PS@lz寄语: 此处建议最好修改项目的文件名为android
ii.

e)Npm init npm init创建了一个空的node模块(其实就是创建了一个package.json描述文件)
i.PS@lz寄语: 需要配置的参数如下

f)Npm install --save react react-native npm install则创建了node_modules目录并把react和react-native下载到了其中
i.PS@lz寄语: 建议下载完之后, 直接去官方例子拷贝node_modules文件
g)curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
第三步curl命令,其实质是下载.flowconfig配置文件,这个文件用于约束js代码的写法。这一步非必需,可跳过。
h)在升生成的package.json中scripts字段添加
"start": "node node_modules/react-native/local-cli/cli.js start"
i.PS@lz寄语: 注意, 需要在前面添加 “ , ” 以符合json正确格式, 否则报错
i)在项目的根目录创建index.android.js 文件, 可以直接拷贝demo的, 然后根据要求修改
(三)准备工作
i.PS@lz寄语: 工程的大概目录如下:

b)在APP 的build.gradle 中添加React Native 依赖
dependencies {
compile "com.facebook.react:react-native:+" // From node_modules.
}
i.PS@lz寄语: 此处会报错

ii.解决方案如下: 在APP 的build.gradle 内的Android{ }添加
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}

iii.参考网址 错误Conflict with dependency 'com.google.code.findbugs:jsr305’
http://blog.csdn.net/qq_23089525/article/details/52777520

c)在项目的build.gradle 文件中, “Allprojects” 代码块中,添加一个maven 依赖的入口
i.PS@lz寄语: 先添加mavenLocal(), 即优先选择本地maven

ii.确保依赖路径的正确!以免在 Android Studio 运行Gradle同步构建时抛出 “Failed to resolve: com.facebook.react:react-native:0.x.x" 异常。
d)权限声明, 在AndroidManifest.xml 中声明网络权限
<uses-permission android:name="android.permission.INTERNET" />
如果需要访问 DevSettingsActivity 界面,也需要在AndroidManifest.xml 中声明:
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

(四)添加原生代码
想要通过原生代码调用 React Native ,就像这样,我们需要在一个Activity 中创建一个 ReactRootView 对象,将它关联一个 React application 并设为界面的主视图。
如果你想在安卓5.0以下的系统上运行,请用com.android.support:appcompat 包中的 AppCompatActivity 代替Activity 。
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();

// 注意这里的HelloWorld必须对应“index.android.js”中的
// “AppRegistry.registerComponent()”的第一个参数
mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);

setContentView(mReactRootView);
}

@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}
如果你的项目名字不是叫“HelloWorld”,则需要将“index.android.js”中的“AppRegistry.registerComponent()”方法中的第一个参数替换为对应的名字。
如果你使用的是 Android Studio , 请用 Alt + Enter 为 MyReactActivity 类导包。当你使用了不止一个 ...facebook... 包时,请谨慎选择要导入的类。
我们需要把 MyReactActivity 的主题设定为Theme.AppCompat.Light.NoActionBar ,因为里面有许多组件都使用了这一主题。
<activity
android:name=".MyReactActivity"
android:label="@string/app_name"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
</activity>
A ReactInstanceManager can be shared amongst multiple activities and/or fragments. You will want to make your ownReactFragment or ReactActivity and have a singleton holderthat holds a ReactInstanceManager. When you need theReactInstanceManager (e.g., to hook up theReactInstanceManager to the lifecycle of those Activities or Fragments) use the one provided by the singleton.
Next, we need to pass some activity lifecycle callbacks down to theReactInstanceManager:
@Override
protected void onPause() {
super.onPause();

if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@Override
protected void onResume() {
super.onResume();

if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();

if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy();
}
}
We also need to pass back button events to React Native:
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
This allows JavaScript to control what happens when the user presses the hardware back button (e.g. to implement navigation). When JavaScript doesn't handle a back press, yourinvokeDefaultOnBackPressed method will be called. By default this simply finishes your Activity.
Finally, we need to hook up the dev menu. By default, this is activated by (rage) shaking the device, but this is not very useful in emulators. So we make it show when you press the hardware menu button (useCtrl + M if you're using Android Studio emulator):
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
现在activity已就绪,可以运行一些JavaScript代码了。
If your app is targeting the Android API level 23 or greater, make sure you have the overlay permission enabled for the development build. You can check it with Settings.canDrawOverlays(this);. This is required in dev builds because react native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23, the user needs to approve it. This can be acheived by adding the following code to the Activity file in the onCreate() method. OVERLAY_PERMISSION_REQ_CODE is a field of the class which would be responsible for passing the result back to the Activity.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
Uri.parse("package:" + getPackageName()));
startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
}
}
Finally, the onActivityResult() method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX.
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
// SYSTEM_ALERT_WINDOW permission not granted...
}
}
}
}
(五)运行你的应用
运行应用首先需要启动开发服务器(Packager)。你只需在项目根目录中执行以下命令即可:
$ npm start
Now build and run your Android app as normal (./gradlew installDebug from command-line; in Android Studio just create debug build as usual).
If you are using Android Studio for your builds and not the Gradle Wrapper directly, make sure you install watchmanbefore running npm start. It will prevent the packager from crashing due to conflicts between Android Studio and the React Native packager.
Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

(六)在Android Studio中打包
你也可以使用Android Studio来打包!You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which’ll be included with your native Android app:
$ react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
Don’t forget to replace the paths with correct ones and create the assets folder if it doesn’t exist!
Now just create a release build of your native app from within Android Studio as usual and you should be good to go!

附件:

Write by lz
2017-04-17

lz的第一个RN项目的更多相关文章

  1. ReactNative新手学习之路02第一个RN项目

    开始第一个RN项目(iOS版)我的电影列表0.1版,后面做列表版 打开上一节项目 index.ios.js,android打开index.android.js.我这里使用的是Atom编辑器,你也可以使 ...

  2. 我的第一个 RN 项目-趣闻

    代码地址如下:http://www.demodashi.com/demo/13486.html 项目预览 IOS: Android: 扫描体验: 或者点我 整体功能跟之前小程序和 Android 项目 ...

  3. 如何在Android studio上运行从github上下载的RN项目

    想要编译别人的RN项目,还是要踩踩坑才能走上正轨啊,分享下我试过多种方法后最喜欢的方法(其实是因为我多次用VS Code编译都是以失败而告终,所以才选择的studio) 注意:这一步是你的开发环境都安 ...

  4. 解决基于TypeScript 的 RN项目相对路径引入组件的问题

    一.前言 在开发RN项目时,经常会要使用这样的方式(../../../)来引入组件,感觉非常繁琐,如果项目结构层级比较多,引入的头部更加分不清. 那有没有一种方案和vue项目一样,经过配置后简写路径, ...

  5. MAVEN学习-第一个Maven项目的构建

    MAVEN安装成功之后就可以进行项目的构建和管理了: 为什么要用maven进行项目的构建和管理? 对于初学者来说一个最直接的也是最容易里的优点在于JAR包的管理,相对于以前开发一个项目的时候我们需要用 ...

  6. 用Kotlin创建第一个Android项目(KAD 01)

    原文标题:Create your first Android project using Kotlin (KAD 01) 作者:Antonio Leiva 时间:Nov 21, 2016 原文链接:h ...

  7. 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变量。

    最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...

  8. 一个年轻的码农的一个C#项目

    话不多少,今天要写一个小项目.我们写项目要做好准备.我们要做项目分析.要知道用户需求,然后在根据需求来规划自己的项目.我们要用自己所学,做最好的程序.尽自己所能完成项目需求.精简代码! 我们今天要写的 ...

  9. struts2学习笔记--动手搭建环境+第一个helloworld项目

    在Myeclipse中已经内置好了struts2的环境,但是为了更好的理解,这里自己从头搭建一下: 前期准备:下载struts2的完整包,下载地址:https://struts.apache.org/ ...

随机推荐

  1. lucene7.1.0实现搜索文件内容

    Lucene的使用主要体现在两个步骤: 1 创建索引,通过IndexWriter对不同的文件进行索引的创建,并将其保存在索引相关文件存储的位置中. 2 通过索引查寻关键字相关文档. 首先,我们需要定义 ...

  2. [Ynoi2016]掉进兔子洞 题解

    题面传送门:https://www.luogu.org/problemnew/show/P4688 (温馨提示,请直接翻至题目描述部分) 1e5的数据范围,以及对区间每个权值出现次数取min此类主席树 ...

  3. Vim配置持续记录

    1. 家目录创建.vimrc文件 set nu    # 设置行号 set tabstop=4 # tab制表符缩进 set autoindent # 自动缩进 set showmatch # 括号匹 ...

  4. 35.multi-index和multi-type搜索模式

        一.multi-index和multi-type搜索模式 /_search:所有索引,所有type下的所有数据都搜索出来 /index1/_search:指定一个index,搜索其下所有typ ...

  5. 只允许一个 <configSections> 元素。它必须是根 <configuration> 元素的第一个子元素- HTTP Error 500.19

    这还是我第一次遇到这个错误,以前都没太注意配置文件中元素的放置顺序.这次在调试一个ASP.NET MVC项目的时候,突然就爆出HTTP Error 500.19错误,提示无法访问请求的页面,因为该页的 ...

  6. mac Gitblit安装

    jdk下载传送门 gitBlit是java编写的的 第一步 需要安装java jdk 传送门 JDK6的下载地址: http://www.oracle.com/technetwork/java/jav ...

  7. 安装GCC for Red Hat Enterprise Linux Server release 6(64位)

    http://www.cnblogs.com/emanlee/archive/2012/08/11/2633895.html

  8. 为什么用clojure作为storm 的主要开发语言

    Why you choose Clojure as the development language of Storm? Could you talk about your long practica ...

  9. 手动重启weblogic脚本

    手动重启weblogic脚本 pid=`ps -ef|grep fzjc_Admin_Server|grep -v grep|awk '{print $2}'` echo $pid kill -9 $ ...

  10. 项目结构、包、编译为exe!

    一个java源文件里至多有一个public类,该类的名称必须与源文件名称称同样.也能够没有public类.文件名称与随意一个类名一致就可以. 包 类似于cpp的namespace,是对类的再封装,防止 ...