React Native 混合开发(Android篇)

React Native Hybrid

Posted by CrazyCodeBoy on August 26, 2018
( ^∀^)阿里正在招人 感兴趣的同学 欢迎来撩               

在React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由React Native实现的,这种开发模式被称为混合开发。

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

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

RNHybrid

原生页面中嵌入RN模块

Native-RN-page

RN页面中嵌入原生模块

RN-Native-page

以上这些都属于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项目

在做混合开发之前我们首先需要创建一个没有Android和iOS模块的React Native项目。我们可以通过两种方式来创建一个这样的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-install--save-react-native.png

其中,有一条警告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_modulesnode_modules体积很大且是动态生成了,建议将其添加到.gitignore文件中;

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

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

react-native init RNHybrid

上述命令