Android原生嵌入React Native详解
1.首先集成的项目目录
我使用的是直接按照react-native init project 的格式来导入的,也就是说,我的android项目目录是跟node_modules是在一个目录下的。
我们init完项目之后,项目初始化完成了,这时候我们可以用命令react-native run-android直接运行项目,至于怎么调试,之前已经说过。
说一下我们怎么开发和运行分开吧,我们开发一般会选择webstrom,开发后我们会android和ios的编译分开。
启动npm
下面说一下android 嵌入rn环境吧。
编写android原生代码,用来调用rn
package com.reactdemo; import android.os.bundle; import android.support.v7.app.appcompatactivity; import android.view.keyevent; 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; public class mainactivity extends appcompatactivity implements defaulthardwarebackbtnhandler { private reactinstancemanager mreactinstancemanager; private reactrootview mreactrootview; @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(); mreactrootview.startreactapplication(mreactinstancemanager, "reactdemo", null); setcontentview(mreactrootview); } @override public boolean onkeyup(int keycode, keyevent event) { if (keycode == keyevent.keycode_menu && mreactinstancemanager != null) { mreactinstancemanager.showdevoptionsdialog(); return true; } return super.onkeyup(keycode, event); } @override public void onbackpressed() { if (mreactinstancemanager != null) { mreactinstancemanager.onbackpressed(); } else { super.onbackpressed(); } } @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); } } }
注意要加上网络等一些权限。
创建package.json,添加react native包
使用命令npm init,跟着步骤走就好了,给大家截个图:
最后你就可以在你的rn项目里面看到一个package.json。
运行demo
注:可能会出现java.lang.runtimeexception: could not get batchedbridge, make sure your bundle is packaged correctly这个错误,react-native bundle —platform android —dev false —entry-file index.android.js —bundle-output reactdemo/app/src/main/assets/index.android.bundle —sourcemap-outpu reactdemo/app/src/main/assets/index.android.map —assets-dest reactdemo/app/src/main/res/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
Android原生嵌入React Native详解
-
React-Native TextInput组件详解及实例代码
-
Android React-Native通信数据模型分析
-
React-Native Android 与 IOS App使用一份代码实现方法
-
Windows下React Native的Android环境部署及布局示例
-
React-Native Android 与 IOS App使用一份代码实现方法
-
Windows下React Native的Android环境部署及布局示例
-
react-native系列(12)图标篇:使用阿里字体库iconfont图标和svg详解
-
react-native中AsyncStorage实例详解
-
Android原生项目集成React Native的方法