Android 项目中嵌入 ReactNative 模块

ReactNative的发展已经进入了很多开发者视野，作为一名原生开发者更是对 RN 充满了无限的好奇和期待,
本节将详细讲述如何将一个原生的 Android App 项目嵌入最新的 RN 模块

1. 准备开始

?

1 2 3 4

<code> 1 .  一个已有的 Android 原生项目 2 . 已经配置好的原生 Android 开发环境和 node.js已经 RN 环境 3 . 改造之后的流程图 </code>

零基础,学编程,高薪就业

【点击进入】

中关村北大青鸟软件开发培训,0基础入学. 签订就业协议，千余家合作名企等你来

查 看

2.开始改造

在原生 Android 项目的在app/build.gradle文件中，添加React Native依赖：

?

1	<code>compile"com.facebook.react:react- native :+</code>

加入.so 库

?

1 2 3

<code>ndk {      abiFilters "armeabi-v7a" , "x86" }   </code>

在工程目录下找到工程的 build.gradle文件中，添加 maven依赖

?

1 2 3 4 5 6 7 8 9

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

?

1 2	<code><code> 3 . 在 app 目录里添加需要的权限 </code></code>

?

1 2 3

<code><code> <uses-permission android:name= "android.permission.INTERNET" >   /**设置调试 的权限**/   <uses-permission android:name= "android.permission.SYSTEM_ALERT_WINDOW" ></uses-permission></uses-permission></code></code>

?

1 2	<code><code><code> 4 .添加 FaceBook 的 ReactNative 调试的 activity </code></code></code>

?

1	<code><code><code>    </activity></code></code></code>

2. 编写原生的 ReactNative 模块 ，废话不多说，直接上代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

<code><code><code> package com.allen.reactapp;   import android.app.Activity; import android.os.Bundle;   import com.facebook.react.LifecycleState; import com.facebook.react.ReactInstanceManager; import com.facebook.react.ReactRootView; import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler; import com.facebook.react.shell.MainReactPackage;   /**   * 作者: allen on 16/7/31.   */ 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())                  /**                   * http://stackoverflow.com/questions/37951246/react-native-cannot-find-development-server-integrating-existing-android-app                   * 调试模式下,建议直接写成 true 吧,我就因为这个错误,调了两天原因                   */ //                .setUseDeveloperSupport(BuildConfig.DEBUG)                  .setUseDeveloperSupport( true )                  .setInitialLifecycleState(LifecycleState.RESUMED)                  .build();          mReactRootView.startReactApplication(mReactInstanceManager, "myreactactivity" , null );            setContentView(mReactRootView);      }        @Override      public void invokeDefaultOnBackPressed() {          super .onBackPressed();      }      @Override      protected void onPause() {          super .onPause();            if (mReactInstanceManager != null ) {              mReactInstanceManager.onHostPause();          }      }        @Override      protected void onResume() {          super .onResume();            if (mReactInstanceManager != null ) {              mReactInstanceManager.onHostResume( this , this );          }      }        @Override      public void onBackPressed() {          if (mReactInstanceManager != null ) {              mReactInstanceManager.onBackPressed();          } else {              super .onBackPressed();          }      }     }     </code></code></code>

到此为止我们的Android项目Activity和配置文件以及完成了最基本的配置方法了。

========================================================================

========================================================================

3. 下面配置工程项目的 RN开发环境

?

1 2	<code><code><code><code> 1 . 先后顺序依次执行一下命令 </code></code></code></code>

?

1	<code><code><code><code> $ npm init</code></code></code></code>

该命令会创建一个package.json文件，并且提示我们输入一些信息，默认不输入即可，不过name必须要为全英文小写哦，

然后再依次去执行以下命令

?

1 2 3

<code><code><code><code> $ npm install --save react   $ npm install --save react- native   $ curl -o .flowconfig https: //raw.githubusercontent.com/facebook/react-native/master/.flowconfig</code></code></code></code>

创建完成后，去工程目录下修改 package.json
在scripts标签那边添加如下代码:

?

1	<code><code><code><code> "start" : "node_modules/react-native/packager/packager.sh" </code></code></code></code>

码市 - 软件开发众包平台

【点击进入】

网站，App，微信开发...平台级服务 汇集 250,000 专业开发者，品质交付

查 看

3. 工程目录下创建 index.android.js 由于是测试代码直接 Copy FaceBook 的源码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

<code><code><code><code>   /**   * Sample React Native App   * https://github.com/facebook/react-native   * @flow   */   import React, { Component } from 'react' ; import {    AppRegistry,    StyleSheet,    Text,    View } from 'react-native' ;   class AwesomeProject extends Component {    render() {      return (        <view style= "{styles.container}" >          <text style= "{styles.welcome}" >            Welcome to React Native!          </text>          <text style= "{styles.instructions}" >            我是 原生项目嵌入的 ReactNative          </text>          <text style= "{styles.instructions}" >            Press Cmd+R to reload,{ '\n' }            Cmd+D or shake for dev menu          </text>        </view>      );    } }   const styles = StyleSheet.create({    container: {      flex: 1 ,      justifyContent: 'center' ,      alignItems: 'center' ,      backgroundColor: '#F5FCFF' ,    },    welcome: {      fontSize: 20 ,      textAlign: 'center' ,      margin: 10 ,    },    instructions: {      textAlign: 'center' ,      color: '#333333' ,      marginBottom: 5 ,    }, });   AppRegistry.registerComponent( 'myreactactivity' , () => AwesomeProject);   </code></code></code></code>

注意：此处需要修改注册的入口 保持一致，我的是 my_react_activity

4.检查以上所有步骤，有无遗漏，如果正常，接下来就可以顺利的运行你的混合 APP 了，如果还不行，你需要检查你的姿势是否正确？

运行你的 APP

?

1 2	<code><code><code><code><code> 1 . 在项目的工程路径运行以下命令来启动你的开发服务器 </code></code></code></code></code>

?

1	<code><code><code><code><code>react- native start</code></code></code></code></code>

或者执行

?

1	<code><code><code><code><code>npm start</code></code></code></code></code>

?

1 2 3

<code><code><code><code><code><code> 2 . android studio 调试你的 APP 3 . 演示效果图 </code></code></code></code></code></code>

急用钱找信贷58同城更靠谱.

【点击进入】

无视征信放贷无抵押放贷点位低当天放款. 全国疑难户/白户/个人/企业信用贷款.

查 看

===================

中关村软件学院web前端培训

【点击进入】

web前端培训,0基础入学,名师小班授课. 线上线下1:1同步教学,保证月薪8000起。

查 看

错误解决：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<code><code><code><code><code><code>  Process: com.allen.reactapp, PID: 20469 java.lang.RuntimeException: java.util.concurrent.ExecutionException: java.lang.RuntimeException: Could not connect to development server. Try the following to fix the issue: Ensure that the packager server is running Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices If you 're on a physical device connected to the same machine, run ' adb reverse tcp: 8081 tcp: 8081 ' to forward requests from your device If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java: 911 ) at com.facebook.react.ReactInstanceManagerImpl.access$ 700 (ReactInstanceManagerImpl.java: 100 ) at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java: 197 ) at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java: 180 ) at android.os.AsyncTask$ 2 .call(AsyncTask.java: 295 ) at java.util.concurrent.FutureTask.run(FutureTask.java: 237 ) at android.os.AsyncTask$SerialExecutor$ 1 .run(AsyncTask.java: 234 ) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java: 1113 ) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java: 588 ) at java.lang.Thread.run(Thread.java: 818 ) Caused by: java.util.concurrent.ExecutionException: java.lang.RuntimeException: Could not connect to development server. Try the following to fix the issue: Ensure that the packager server is running Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices If you 're on a physical device connected to the same machine, run ' adb reverse tcp: 8081 tcp: 8081 ' to forward requests from your device If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y at com.facebook.react.common.futures.SimpleSettableFuture.get(SimpleSettableFuture.java: 68 ) at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java: 882 )      ... 9 more Caused by: java.lang.RuntimeException: Could not connect to development server. Try the following to fix the issue: Ensure that the packager server is running Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices</code></code></code></code></code></code>

解决办法：
.setUseDeveloperSupport(true) 调试模式下,建议直接写成 true 吧,

签名打包混合 APP
1. 将 js 文件存入 bundle 一起打包
执行命令：

?

1	<code><code><code><code><code><code>curl -k "http://localhost:8081/index.android.bundle" > reactapp/src/main/assets/index.android.bundle</code></code></code></code></code></code>

执行完命令成功，在 assets目录应该看到 index.android.bundle文件

Android studio 执行打包过程，作为一名 Android 老司机我就不再具体描述了

原 Android 移植 React Native 项目地址