原生应用不仅可以跳转到RN页面，也可以吧RN的组件放到原生应用中，作为原生应用的一部分。

首先介绍如何把react native嵌入到android中，然后再介绍如何把RN嵌入到ios中；

第一部分：将RN嵌入到android中的步骤如下

一、用Android Studio 创建一个程序，我的是RnInAndroid；

二、打开命令行终端，进入RnInAndroid，

2.1、输入以下命令：

npm init

然后会创建一个package.json的文件，搞过RN的我们知道，这是RN的配置文件，下面需要我们输入一些信息：

2.2、输入yes，创建好package.json文件，然后输入：

npm install--save react react-native

会自动联网下载rn的组件库node_modules，

2.3、接着输入：

curl-o.flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

2.4、进入项目下面，打开刚才创建的package.json，在"scripts"--》 "test"的这一行后面添加个逗号，要不然报错的，这是json的格式，然后在test的下一行，添加一行代码：

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

2.5、然后在项目目录下穿件一个index.android.js的文件，然后把下面的代码拷贝到文件中，下面的代码是RN的代码，现实的是一个页面，里面有一个Text的组件，相当于android中的textview：

'use strict';

import React from 'react';

import{

AppRegistry,

StyleSheet,

Text,

View} from 'react-native';

classHelloWorld extends React.Component{

render(){

return(

<Text style={styles.hello}>这就是RN的页面哦</Text>

</View>

)

}

var styles = StyleSheet.create({

container:{

flex:1,

justifyContent:'center',

hello:{

fontSize:20,

textAlign:'center',

margin:10,

});

AppRegistry.registerComponent('HelloWorld',()=> HelloWorld);

2.6、把你的项目下面的app（我的是 RnInAndroid/app）下的build.gradle文件打开，

在 dependencies 的代码块内，添加如下代码：

compile"com.facebook.react:react-native:+"

2.7、在项目根目录的build.gradle（我的是：RnInAndroid/build.gradle）中添加react native 路径，这个文件和上面的那个build.gradle文件不一样哦：找到 allprojects代码块，找到repositories，在这个代码块内添加如下的代码：

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

如：

2.8、打开项目名/app/src/main/AndroidManifest.xml，在manifest标签内，和application同一级，添加联网权限：

<uses-permission android:name="android.permission.INTERNET"/>

三、添加原生代码

3.1、在项目名/app/src/main/java/com/项目名.../rninandroid/，在这个目录下面创建一个java文件，文件名为：MyReactActivity.java,

然后复制下面的代码：

package com.example.vittorio.rninandroid;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;/**  * Created by vittorio on 2016/10/14.  */ 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)                //.setUseOldBridge(true) // uncomment this line if your app crashes                .build();        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);        setContentView(mReactRootView);    }    @Override    public void invokeDefaultOnBackPressed() {        super.onBackPressed();    }}

注意：

3.1.1、如果你用的是android studio的话，点击最上面的build菜单，clean project，然后会提示你有些包没有导入，按 alt + enter，一个一个的导入包；

3.1.2、上面代码的第一行：package是你自己的包名，在AndroidManifest.xml里面的package属性值里面有；

3.1.3、如果你的index.android.js的 AppRegistry.registerComponent('Liucheng', () => Liucheng)，那就把上面代码中的"HelloWorld"改成“Liucheng”，我这里是Liucheng举个例子，

mReactRootView.startReactApplication(mReactInstanceManager, "Liucheng", null);点击

3.1.4、如果出现下面的错误：

Error:Conflict with dependency 'com.google.code.findbugs:jsr305'. Resolved versions for app (3.0.0) and test app (2.0.1) differ. See

http://g.co/androidstudio/app-test-app-conflictfor details

解决办法：需要在你的根目录的build.gradle中的android代码快内，添加如下的代码：

configurations.all {    resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'}
如下图所示：

3.1.5、重新编译：在android studio（简称：AS）中点击上边的build菜单，选择rebuild project；

3.2、在AndroidManifest.xml文件中，注册刚才新建的activity（MyReactActivity），并为它指定一个主题：

<activity    android:name=".MyReactActivity"    android:label="@string/app_name"    android:theme="@style/Theme.AppCompat.Light.NoActionBar"></activity>
3.3、在 MyReactActivity.java文件中添加生命周期函数：

@Override    protected void onPause() {        super.onPause();        if (mReactInstanceManager != null) {            mReactInstanceManager.onPause();        }    }    @Override    protected void onResume() {        super.onResume();        if (mReactInstanceManager != null) {            mReactInstanceManager.onResume(this, this);        }    }    @Override    protected void onDestroy() {        super.onDestroy();        if (mReactInstanceManager != null) {            mReactInstanceManager.onDestroy();        }    }//    We also need to pass back button events to React Native:    @Override    public void onBackPressed() {        if (mReactInstanceManager != null) {            mReactInstanceManager.onBackPressed();        } else {            super.onBackPressed();        }    }
3.4、添加按键的响应，默认的意思是摇动设备出来菜单，但是在模拟器中不好使，所以我们需要添加相应的代码来处理物理按键，用as的模拟器按下ctrl+M会触发响应的按键：下面的代码也是在MyReactActivity.java文件中添加的哦:

@Overridepublic boolean onKeyUp(int keyCode, KeyEvent event) {    if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {        mReactInstanceManager.showDevOptionsDialog();        return true;    }    return super.onKeyUp(keyCode, event);}
3.5、在MainActivity.java的布局中（activity_main.xml中）添加一个按键，并在MAinActivity中添加这个按键的作用，作用是按下这个按键，就跳转到RN的界面，也就是跳转到MyReactActivtiy，具体代码如下：

3.6、现在命令行中启动nodejs服务器：

  npm start

3.7、打开模拟器（我用的是Genymotion，你也可以用as自带的模拟器或者真机测试），然后在AS运行点击Run：

四、坑爹了，原生的代码能正常显示，但是点击跳转RN的界面，就退出了，

4.1、报错如下：

E/AndroidRuntime: FATAL EXCEPTION: main          Process: com.example.vittorio.rninandroid, PID: 13885          android.view.WindowManager$BadTokenException: Unable to add window android.view.ViewRootImpl$W@d6bfdbd -- permission denied for window type 2003            at android.view.ViewRootImpl.setView(ViewRootImpl.java:702)            at android.view.WindowManagerGlobal.addView(WindowManagerGlobal.java:342)            at android.view.WindowManagerImpl.addView(WindowManagerImpl.java:93)            at android.app.Dialog.show(Dialog.java:316)            at com.facebook.react.devsupport.DevSupportManagerImpl.handleReloadJS(DevSupportManagerImpl.java:538)            at com.facebook.react.ReactInstanceManagerImpl$3$1.run(ReactInstanceManagerImpl.java:386)            at android.os.Handler.handleCallback(Handler.java:751)            at android.os.Handler.dispatchMessage(Handler.java:95)            at android.os.Looper.loop(Looper.java:154)            at android.app.ActivityThread.main(ActivityThread.java:6077)            at java.lang.reflect.Method.invoke(Native Method)            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:865)            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:755)

解决办法：增加权限：

<uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/><uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" />
4.2、但是依旧报错，在activit的点击事件里面添加：

4.3、依旧报错：

java.lang.IllegalAccessError: Method 'void android.support.v4.net.ConnectivityManagerCompat.()' is inaccessible to class 'com.f

acebook.react.modules.netinfo.NetInfoModule' (declaration of 'com.facebook.react.modules.netinfo.NetInfoModule' appears in

/data/app/package.name-2/base.apk)

解决办法：（老外也遇到了这样的问题https://github.com/facebook/react-native/issues/6152#issuecomment-200759453）

在项目下修改以下的文件内容：

                    .gitignore（在该文件里添加排除项，node_modules/ 和 npm-debug.log）
            app/build.gradle (将 'com.android.support:appcompat-v7:24.2.1' 改为 'com.android.support:appcompat-v7:23.0.1')
            gradle.properties (在文件末尾添加，android.useDeprecatedNdk=true)

4.4、编译依旧报错：

undefined is not a function (evaluating 'remoteModules.forEach')

解决办法：

在项目下面的build.gradle为把

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

 maven {    // All of React Native (JS, Android binaries) is installed from npm    url "$rootDir/node_modules/react-native/android"}
，因为$rootDir就是你的项目目录，如果用../的话，找不到这个目录就会报错的

4.5.依旧报错啊，报错啊：

Error:(52, 34) 错误: 找不到符号 符号:  方法 onPause() 位置: 类型为ReactInstanceManager的变量 mReactInstanceManager Error:(61, 34) 错误: 找不到符号 符号:  方法 onResume(MyReactActivity,MyReactActivity) 位置: 类型为ReactInstanceManager的变量 mReactInstanceManager Error:(70, 34) 错误: 找不到符号 符号:  方法 onDestroy() 位置: 类型为ReactInstanceManager的变量 mReactInstanceManager

解决原因：找了好长时间的答案，也没有找到原因在哪儿，只能先把onpause、onResume、onDestroy这三个方法注释掉，

编译成功啦！！！真高兴啊真高兴；

4.6、但是进入RN的页面后按下Ctrl+M，没反应，不能调出调试菜单：

在AndroidMenifest.xml文件中添加：<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>

就可以了

五、将RN作为组件嵌入到android中作为一个控件使用：

5.1、我们注意到在MyReactActivtiy.java文件中，我们发现其实这个activity加载页面也用的是setContentView(mReactRootView);

只要我们新建一个xml的布局文件，布局中添加一个linearlayout或者relativelayout布局，然后在代码中把这个RN的布局添加进去就行了，或者是在xml中直接添加RN布局代码：

下面就两种凡是贴出代码，供大家参考使用：

第一种种新建一个myreactactivity.xml布局文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView        android:layout_width="match_parent"        android:layout_height="200dp"        android:text="上半部分是android的布局"        android:background="#6638"        android:textSize="30sp"        android:gravity="center"/>    <LinearLayout        android:id="@+id/ll"        android:layout_width="match_parent"        android:layout_height="wrap_content"></LinearLayout></LinearLayout>

在MyReactActivtiy.java中修改代码，红色部分为增加的内容：

package com.example.vittorio.rninandroid;import android.app.Activity;import android.os.Bundle;import android.view.KeyEvent;import android.widget.LinearLayout;import com.facebook.react.ReactInstanceManager;import com.facebook.react.ReactRootView;import com.facebook.react.common.LifecycleState;import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;import com.facebook.react.shell.MainReactPackage;/**  * Created by liucheng on 2016/10/14.  */ public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {    private ReactRootView mReactRootView;    private ReactInstanceManager mReactInstanceManager;    private LinearLayout ll;    @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)                //.setUseOldBridge(true) // uncomment this line if your app crashes                .build();        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);        setContentView(R.layout.myreactactivity);        initView();    }    。。。    private void initView() {        ll = (LinearLayout) findViewById(R.id.ll);        ll.addView(mReactRootView);    }}

第二种方法直接在布局中引用ReactRootView控件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView        android:layout_width="match_parent"        android:layout_height="200dp"        android:text="上半部分是android的布局"        android:background="#6638"        android:textSize="30sp"        android:gravity="center"/>    <!--<LinearLayout-->        <!--android:id="@+id/ll"-->        <!--android:layout_width="match_parent"-->        <!--android:layout_height="wrap_content"></LinearLayout>-->     <com.facebook.react.ReactRootView         android:id="@+id/rnview"        android:layout_width="match_parent"        android:layout_height="match_parent"     /></LinearLayout>

代码文件为：

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {    private ReactRootView mReactRootView;    private ReactInstanceManager mReactInstanceManager;//    private LinearLayout ll;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.myreactactivity);//        mReactRootView = new ReactRootView(this);注释掉这一行，不新建一个RN的view了，因为我们已经引用了，不需要重新创建了        mReactRootView = (ReactRootView)findViewById(R.id.rnview);        mReactInstanceManager = ReactInstanceManager.builder()                .setApplication(getApplication())                .setBundleAssetName("index.android.bundle")                .setJSMainModuleName("index.android")                .addPackage(new MainReactPackage())                .setUseDeveloperSupport(BuildConfig.DEBUG)                .setInitialLifecycleState(LifecycleState.RESUMED)                //.setUseOldBridge(true) // uncomment this line if your app crashes                .build();        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);//        initView();    }    ...   //记得把上面新建的的initView（）方法给删除其他的和上面类似}

六、今天到此为止吧，本来还想把IOS端的搞一下，明天再发一篇文章吧，各种坑各种坑！！！我在修路我在补坑，让你们踏着我们的肩膀跑的更高看的更远；

留个小问题：RN页面如何返回到原生页面上，如何处理android的物理返回按键，等我后天处理教大家哦！

如何把React Native嵌入到原生android应用中

第一部分：将RN嵌入到android中的步骤如下

更多相关文章

随机推荐