当前位置：网站首页 > React Native移动开发 > 正文

React Native Android混合开发实战教程

React Native移动开发 来源： 网络 编辑：小编 更新时间：2024-10-30 23:33:34 浏览量：63

混合开发的一些其他应用场景：

在原有项目中加入RN页面，在RN项目中加入原生页面

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

原生页面中嵌入RN模块

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

RN页面中嵌入原生模块

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

以上这些都属于React Native混合开发的范畴，那么如何进行React Native混合开发呢？

在这篇文章中我将向大家介绍React Native混合开发的流程，需要掌握的技术，以及一些经验技巧，与该文章配套的还有React Native与Android 混合开发讲解的视频教程。

React Native混合开发的教程我们分为上下两篇，上篇主要介绍如何在现有的Android应用上进行React Native混合开发，下篇主要介绍如何在现有的iOS应用上进行React Native混合开发。

将React Native集成到现有的Android应用中需要如下几个主要步骤：

  • 首先，你需要有一个React Native项目；
  • 为已存在的Android应用添加React Native所需要的依赖；
  • 创建index.js并添加你的React Native代码；
  • 创建一个Activity来承载React Native，在这个Activity中创建一个ReactRootView来作为React Native服务的容器；
  • 启动React Native的Packager服务，运行应用；
  • (可选)根据需要添加更多React Native的组件；
  • 运行、调试、打包、发布应用；
  • 升职加薪、迎娶白富美，走向人生巅峰！；

1. 创建一个React Native项目

  • 通过npm安装react-native的方式添加一个React Native项目；
  • 通过react-native init来初始化一个React Native项目；

通过npm安装react-native的方式添加一个React Native项目

第一步：创建一个名为RNHybridApp的目录，然后在该目录下添加一个包含如下信息的package.json：

{
“name”: “RNHybrid”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“start”: “node node_modules/react-native/local-cli/cli.js start”
}
}

第二步：在为package.json添加react-native

在该目录下执行：

npm install --save react-native

执行完上述命令之后，你会看到如下警告：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

其中，有一条警告npm WARN react-native@0.55.4 requires a peer of react@16.3.1 but none is installed告诉我们需要安装react@16.3.1：

npm install --save react@16.3.1

至此，一个不含Android和iOS模块的React Native项目便创建好了。此过程所遇到的更多问题可查阅：React Native与Android 混合开发讲解的视频教程

提示：npm 会在你的目录下创建一个node_modules，node_modules体积很大且是动态生成了，建议将其添加到.gitignore文件中；

通过react-native init来初始化一个React Native项目

除了上述方式之外，我们也可以通过react-native init命令来初始化一个React Native项目。

react-native init RNHybrid

上述命令会初始化一个完成的名为RNHybrid的React Native项目，然后我们将里面的android和ios目录删除，替换成已存在Android和iOS项目。

2. 添加React Native所需要的依赖

在上文中我们已经创建了个一个React Native项目，接下来我们来看一下如何将这个React Native项目和我们已经存在的Native项目进行融合。

在进行融合之前我们需要将已经存在的Native项目放到我们创建的RNHybrid下，比如：我有一个名为RNHybridAndroid的Android项目，将其放到RNHybrid目录下：

RNHybrid
├── RNHybridAndroid
├── package.json
├── node_modules
└── .gitignore

第一步：配置maven

接下来我们需要为已经存在的RNHybridAndroid项目添加 React Native依赖，在RNHybrid/RNHybridAndroid/app/build.gradle文件中添加如下代码：

dependencies {
compile ‘com.android.support:appcompat-v7:23.0.1’
…
compile “com.facebook.react:react-native:+” // From node_modules
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

然后，我们为RNHybridAndroid项目配置使用的本地React Native maven目录，在RNHybrid/RNHybridAndroid/build.gradle文件中添加如下代码：

allprojects {
repositories {
mavenLocal()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url “$rootDir/…/node_modules/react-native/android”
}
…
}
…
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

提示：为确保你配置的目录正确，可以通过在Android Studio中运行Gradle sync 看是否有 “Failed to resolve: com.facebook.react:react-native:0.x.x" 的错误出现，没有错误则说明配置正确，否则说明配置路由有问题。 此过程所遇到的更多问题可查阅：React Native与Android 混合开发讲解的视频教程

第二步：配置权限

接下来我们为APP运行配置所需要的权限：检查你项目中的AndroidManifest.xml文件中看是否有如下权限：

如果没有，则需要将上述权限添加到AndroidManifest.xml中。

另外，如果你需要用到RN的Dev Settings功能：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

则需要在AndroidManifest.xml文件中添加如下代码：

提示：上述图片就是RN 开发调试弹框中的Dev Settings功能，打开该功能会弹出上图的一个界面，这个界面就是DevSettingsActivity。

第三步：指定要ndk需要兼容的架构(重要)

Android不能同时加载多种架构的so库，现在很多Android第三方sdks对abi的支持比较全，可能会包含armeabi, armeabi-v7a,x86, arm64-v8a,x86_64五种abi，如果不加限制直接引用会自动编译出支持5种abi的APK，而Android设备会从这些abi进行中优先选择某一个，比如：arm64-v8a，但如果其他sdk不支持这个架构的abi的话就会出现crash。如下图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

怎么解决呢：

在app/gradle 文件中添加如下代码：

defaultConfig {
…
ndk {
abiFilters “armeabi-v7a”, “x86”
}
}

上述代码的意思是，限制打包的so库只包含armeabi-v7a与x86。此过程所遇到的更多问题可查阅：React Native与Android 混合开发讲解的视频教程

可参考：libgnustl_shared.so" is 32-bit instead of 64-bit

3.创建index.js并添加你的React Native代码

通过上述两步，我们已经为RNHybridAndroid项目添加了React Native依赖，接下来我们来开发一些JS代码。

在RNHybrid目录下创建一个index.js文件并添加如下代码：

AppRegistry.registerComponent(‘App1’, () => App);

上述代码，AppRegistry.registerComponent('App1', () => App);目的是向React Native注册一个名为App1的组件，然后我会在第四步给大家介绍如何在Android中加载并显示出这个组件。

另外，在上述代码中我们引用了一个App.js文件：

import React, { Component } from ‘react’;
import {
Platform,
StyleSheet,
Text,
View
} from ‘react-native’;

type Props = {};
export default class App extends Component {
render() {
return (


this is App


);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
welcome: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
}
});

这个App.js文件代表了我们React Native的一个页面，在这个页面中显示了this is App的文本内容。

以上就是为本次演示所添加的React Native代码，你也可以根据需要添加更多的React Native代码以及组件出来。

4. 为React Native创建一个Activity来作为容器

经过上述3、4步，我们已经为RNHybridAndroid项目添加了React Native依赖，并且创建一些React Native代码和注册了一个名为App1的组件，接下来我们来学习下如何在RNHybridAndroid项目中使用这个App1组件。

创建RNPageActivity

首先我们需要创建一个Activity来作为React Native的容器，

public class RNPageActivity extends AppCompatActivity 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”)
.setJSMainModulePath(“index”)
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 这个"App1"名字一定要和我们在index.js中注册的名字保持一致AppRegistry.registerComponent()
mReactRootView.startReactApplication(mReactInstanceManager, “App1”, null);

@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}

参数说明

  • setBundleAssetName：打包时放在assets目录下的JS bundle包的名字，App release之后会从该目录下加载JS bundle；
  • setJSMainModulePath：JS bundle中主入口的文件名，也就是我们上文中创建的那个index.js文件；
  • addPackage：向RN添加Native Moudle，在上述代码中我们添加了new MainReactPackage()这个是必须的，另外，如果我们创建一些其他的Native Moudle也需要通过addPackage的方式将其注册到RN中。需要指出的是RN除了这个方法外，也提供了一个addPackages方法用于批量向RN添加Native Moudle；
  • setUseDeveloperSupport：设置RN是否开启开发者模式(debugging，reload，dev memu)，比如我们常用开发者弹框；
  • setInitialLifecycleState：通过这个方法来设置RN初始化时所处的生命周期状态，一般设置成LifecycleState.RESUMED就行，和下文讲的Activity容器的生命周期状态关联；
  • mReactRootView.startReactApplication：它的第一个参数是mReactInstanceManager，第二个参数是我们在index.js中注册的组件的名字，第三个参数接受一个Bundle来作为RN初始化时传递给JS的初始化数据，它的具体用法我会在React Android 混合开发讲解的视频教程中再具体的讲解；

在中AndroidManifest.xml注册一个RNPageActivity

Android系统要求，每一个要打开的Activity都要在AndroidManifest.xml中进行注册：

上述代码中我们为RNPageActivity添加了一个@style/Theme.AppCompat.Light.NoActionBar类型的theme，这也是React Native UI组件所要求的主题。

为ReactInstanceManager添加Activity的生命周期回调

一个 ReactInstanceManager可以被多个activities或fragments共享，所以我们需要在Activity的生命周期中回调ReactInstanceManager的对于的方法。

@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
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}

@Override
protected void onDestroy() {
super.onDestroy();

if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy(this);
}
if (mReactRootView != null) {
mReactRootView.unmountReactApplication();
}
}

从上述代码中你会发现有个不属于Activity生命周期中的方法onBackPressed，添加它的目的主要是为了当用户单击手机的返回键之后将事件传递给JS，如果JS消费了这个事件，Native就不再消费了，如果JS没有消费这个事件那么RN会回调invokeDefaultOnBackPressed代码。

@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}

此过程更细致的讲解可查阅：React Native与Android 混合开发讲解的视频教程

添加开发者菜单

在RN中有个很好用的工具开发者菜单，我们平时调试RN应用时对它的使用频率很高，接下来我们来为RNHybridAndroid添加开着菜单。

public boolean onKeyUp(int keyCode, KeyEvent event) {
if (getUseDeveloperSupport()) {
if (keyCode == KeyEvent.KEYCODE_MENU) {//Ctrl + M 打开RN开发者菜单
mReactInstanceManager.showDevOptionsDialog();
return true;
}
}
return super.onKeyUp(keyCode, event);
}

通过上代码即可监听Ctrl + M来打开RN开发者菜单。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

另外，RN也提供了双击R来快速加载JS的功能，通过如下代码即可打开该功能：

public boolean onKeyUp(int keyCode, KeyEvent event) {
if (getUseDeveloperSupport()) {
if (keyCode == KeyEvent.KEYCODE_MENU) {//Ctrl + M 打开RN开发者菜单
mReactInstanceManager.showDevOptionsDialog();
return true;
}
boolean didDoubleTapR = Assertions.assertNotNull(mDoubleTapReloadRecognizer).didDoubleTapR(keyCode, getCurrentFocus());
if (didDoubleTapR) {//双击R 重新加载JS
mReactInstanceManager.getDevSupportManager().handleReloadJS();
return true;
}
}
return super.onKeyUp(keyCode, event);
}

此过程更细致的讲解可查阅：React Native与Android 混合开发讲解的视频教程

使用ReactActivity来作为RN容器

在上述的代码中我们都是通过ReactInstanceManager来创建和加载JS的，然后重写了Activity的生命周期来对ReactInstanceManager进行回调，另外，重写了onKeyUp来启用开发者菜单等功能。

另外，查看RN的源码你会发现在RN sdk中有个叫ReactActivity的Activity，该Activity是RN官方封装的一个RN容器。另外，在通过react-native init命令初始化的一个项目中你会发现有个MainActivity是继承ReactActivity的，接下来我们就来继承ReactActivity来封装一个RN容器。

  • Returns the name of the main component registered from JavaScript.
  • This is used to schedule rendering of the component.
    */
    @Override
    protected String getMainComponentName() {
    return “App1”;
    }
    }

另外，我们需要实现一个MainApplication并添加如下代码：

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage()
);
}

@Override
protected String getJSMainModuleName() {
return “index”;
}
};

@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}

@Override

最后

小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

[外链图片转存中…(img-GEJvuyFx-67)]

[外链图片转存中…(img-L0IoyPPQ-68)]

[外链图片转存中…(img-XZAvqZ3d-68)]

[外链图片转存中…(img-pVakvrAA-69)]

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

如果你需要这些资料， ⬅ 专栏获取

到此这篇React Native Android混合开发实战教程的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

  • 上一篇： react native_微服务 落地完全实践
  • 下一篇： React Native开发速记_react native 开发

    • 版权声明：

    本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
    如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！


    转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/3723.html

    相关文章：

  • react native_微服务 落地完全实践2024-10-30 23:33:34
  • [译] 测试原生，Flutter 和 React Native 移动开发之间的性能差异2024-10-30 23:33:34
  • React Native Android混合开发实战教程，Android开发面试准备_react混合开发app2024-10-30 23:33:34
  • React Native跨平台移动应用学习与开发(二) 第一个项目2024-10-30 23:33:34
  • ReactNative IOS 开发教程（一）2024-10-30 23:33:34
  • React Native开发速记_react native 开发2024-10-30 23:33:34
  • native react 电子书_React Native移动开发实战 (袁林著) 带目录完整pdf[146MB]2024-10-30 23:33:34
  • reactnative开源项目_react native环境搭建2024-10-30 23:33:34
  • React Native移动开发实战-3-实现页面间的数据传递2024-10-30 23:33:34
  • React-Native优质开源项目，详解2024-10-30 23:33:34
    • ❮ 全屏图片 ❯