新版React Native 混合开发(iOS篇)

最新推荐文章于 2024-08-19 11:43:49 发布
最新推荐文章于 2024-08-19 11:43:49 发布
阅读量4.9k 收藏 11
点赞数
分类专栏： 【React-Native2点滴知识 】
原文链接：https://www.tuicool.com/articles/3qUBJrR
版权

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

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

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

原生页面中嵌入RN模块

RN页面中嵌入原生模块

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

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

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

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

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

在做混合开发之前我们首先需要创建一个没有Android和iOS模块的React Native项目。我们可以通过两种方式来创建一个这样的React Native项目：

npm
react-native init

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

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

{ "name": "RNHybrid", "version": "0.0.1", "private": true, "scripts": { "start": "yarn react-native start" } }

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

在该目录下执行：

npm install --save react-native

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

npm install --save react

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

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

通过react-native init来初始化一个React Native项目[]( https://www.devio.org/2020/04...

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

react-native init RNHybrid

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

  1. 添加React Native所需要的依赖[]( https://www.devio.org/2020/04...

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

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

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

第一步：配置CocoaPods依赖

接下来我们需要为已经存在的RNHybridiOS项目添加 React Native依赖，在RNHybridiOS目录下创建一个 Podfile 文件(如果已经添加过可跳过)：

pod install

然后，我们在 Podfile 文件中添加如下代码：

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'RNHybirdiOS' do
 # Your 'node_modules' directory is probably in the root of your project,
   # but if not, adjust the `:path` accordingly
   pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
   pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
   pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
   pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
   pod 'React', :path => '../node_modules/react-native/'
   pod 'React-Core', :path => '../node_modules/react-native/'
   pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
   pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
   pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
   pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
   pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
   pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
   pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
   pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
   pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
   pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
   pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
   pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

   pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
   pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
   pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
   pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
   pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon"
   pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
   pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

   pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
   pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  # Pods for RNHybirdiOS
end

接下来在 RNHybridiOS 目录下执行：

pod install

执行成功之后，你会看到如下输出：

如果：出现 xcrun 的错误，需要安装 Command Line Tools for Xcode ，打开XCode -> Preferences -> Locations 选择Command Line Tools：

如果：出现 Unable to find a specification for 'boost-for-react-native' depended upon by Folly 的错误，则需要在目录下执行 pod update 即可。 此过程所遇到的更多问题可查阅：React Native与iOS 混合开发讲解的视频教程

第二步：设置App Transport Security Settings

由于我们的 RNHybridiOS 应用需要加载本地服务器上的JS Bundle，而且是http的协议传输，所以需要设置 App Transport Security Settings ，让其支持http传输，否则会出现如下错误：

由于 App Transport Security Settings 网上设置的教程有很多，在这里就不重复了，需要的同学可以Google一下 xcode http 。 此过程所遇到的更多问题可查阅：React Native与iOS 混合开发讲解的视频教程

3.创建index.js并添加你的React Native代码[]( https://www.devio.org/2020/04...

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

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

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('App1', () => App);

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

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

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

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          this is App
        </Text>
      </View>
    );
  }
}

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代码以及组件出来。 此过程更细致的讲解可查阅：React Native与iOS 混合开发讲解的视频教程

  1. 为React Native创建一个ViewController和RCTRootView来作为容器[]( https://www.devio.org/2020/04...

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

创建RNPageController[]( https://www.devio.org/2020/04...

首先我们需要创建一个ViewController和RCTRootView来作为React Native的容器。

#import "RNPageController.h"

#import <React/RCTRootView.h>

#import <React/RCTBundleURLProvider.h>

#import <React/RCTEventEmitter.h>

@interface RNPageController ()

@end

@implementation RNPageController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initRCTRootView];
}
- (void)initRCTRootView{
    NSURL *jsCodeLocation;

    // jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"]; //手动拼接jsCodeLocation用于开发环境 //jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; //release之后从包中读取名为main的静态js bundle

    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; // 通过RCTBundleURLProvider生成，用于开发环境

    //这个"App1"名字一定要和我们在index.js中注册的名字保持一致

    RCTRootView *rootView =[[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName: @"App1" initialProperties:nil
                                                    launchOptions: nil];
    self.view=rootView;
}
@end

参数说明

  • initWithBundleURL ：用于设置 jsCodeLocation ，有上述三种设置方式，在开发阶段推荐使用 RCTBundleURLProvider 的形式生成 jsCodeLocation ，release只会使用静态js bundle；
  • moduleName ：用于指定RN要加载的JS 模块名，也就是上文中所讲的在 index.js 中注册的模块名；
  • launchOptions ：主要在AppDelegate加载JS Bundle时使用，这里传nil就行；
  • initialProperties ：接受一个 NSDictionary 类型的参数来作为RN初始化时传递给JS的初始化数据，它的具体用法我会在 React iOS 混合开发讲解的视频教程 中再具体的讲解；
  1. 运行React Native[]( https://www.devio.org/2020/04...

经过上述的步骤，我们已经完成了对一个现有iOS项目RNHybridiOS添加了RN，并且创建了一个 RNPageController 来加载我们在JS中注册的名为 App1 的RN 组件。

接下来我们来启动RN服务器，运行RNHybridiOS项目打开 RNPageController 来查看效果：

npm start

在 RNHybrid 的根目录运行上述命令，来启动一个RN本地服务：

然后我们打开Xcode，点击运行按钮或者通过快捷键 Command+R 来将 RNHybridiOS 安装到模拟器上：

  1. 添加更多React Native的组件[]( https://www.devio.org/2020/04...

我们可以根据需要添加更多的React Native的组件：

import { AppRegistry } from 'react-native';
import App from './App';
import App2 from './App2';

AppRegistry.registerComponent('App1', () => App);
AppRegistry.registerComponent('App2', () => App);

然后，在Native中根据需要加载指定名字的RN组件即可。

  1. 调试、打包、发布应用[]( https://www.devio.org/2020/04...

调试[]( https://www.devio.org/2020/04...

调试这种混合的RN应用和调试一个纯RN应用时一样的，都是 Command + D 打开 RN 开发者菜单 ， Command + R 进行reload JS，另外大家也可以通过学习[]( https://www.devio.org/2020/04... 。

打包[]( https://www.devio.org/2020/04...

虽让，通过上述步骤，我们将RN和我们的RNHybridiOS项目做了融合，但打包RNHybridiOS你会发现里面并不包含JS部分的代码，如果要将JS代码打包进iOS ipa包中，可以通过如下命令：

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/

记得在运行上述命令之前先创建一个 release_ios 目录。

参数说明

  • --platform ios ：代表打包导出的平台为iOS；
  • --dev false ：代表关闭JS的开发者模式；
  • -entry-file index.js ：代表js的入口文件为 index.js ；
  • --bundle-output ：后面跟的是打包后将JS bundle包导出到的位置；
  • --assets-dest ：后面跟的是打包后的一些资源文件导出到的位置；

上述命令执行完成之后，会在 release_ios 目录下生成 main.jsbundle ， main.jsbundle.meta ，以及 assets 目录(如果RN中用到了一些图片资源的话)。

将js bundle包和图片资源导入到iOS项目中[]( https://www.devio.org/2020/04...

这一步我们需要用到XCode，选择assets文件夹与main.jsbundle文件将其拖拽到XCode的项目导航面板中即可。

然后，修改 jsCodeLocation ，添加如下代码：

...
  NSURL *jsCodeLocation;
 //jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
 +jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

上述代码的作用是让React Native去使用我们刚才导入的jsbundle，这样以来我们就摆脱了对本地nodejs服务器的依赖。

提示：如果在项目中使用了 CodePush热更新 ，那么我们需要就可以直接通过CodePush来读取本地的jsbundle，方法如下：

...
  NSURL *jsCodeLocation;
#ifdef DEBUG     jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else     jsCodeLocation = [CodePush bundleURL];
#endif ...

到目前为止呢，我们已经将js bundle包和图片资源导入到iOS项目中，接下来我们就可以发布我们的iOS应用了。

发布iOS应用[]( https://www.devio.org/2020/04...

发布iOS应用我们需要有一个99美元的账号用于将App上传到AppStore，或者是299美元的企业级账号用于将App发布到自己公司的服务器或第三方公司的服务器。

接下来我们就需要进行申请APPID ➜ 在Tunes Connect创建应用 ➜ 打包程序 ➜ 将应用提交到app store等几大步骤。

因为 官方文档 中有详细的说明，在这我就不再重复了。

更多React Native混合开发的实用技巧,可学习与此文章配套的视频课程：《React Native与iOS 混合开发讲解》

实例源码[]( https://www.devio.org/2020/04...

barnett_y
关注
专栏目录
从零开始配置React-Native IOS环境
emonzan的博客
08-26 1550
配置React-Native IOS环境
React-Native环境搭建（IOS）
mapbar_front的博客
12-21 2259
React-Native开发环境的搭建，有相关的技术文档，里面详细的记录了环境搭建的方方面面。但是我个人觉得，还是有相当一部分，写的并不是很细节，比如安装某一个包，到底需要等待多长时间，有没有更好的替代方案，在官方文档中，依然介绍的不是很清楚。本文旨在针对官方文档的一些细节，进行补充，建议官方文档和本文章结合着阅读，可能效果会更好。
ReactNative IOS 开发教程（二）
最新发布
龙哥盟
08-19 1051
在这一章中，我们学习了 Flux 模式，以及 Flux 与传统 MVC 模式的不同之处，以及它解决问题的方式。我们还深入研究了 Flux 核心概念，然后查看了在项目中使用它的例子。最后，我们用 Flux 创建了一个 React 本地应用。在本章中，我们了解了 iOS 设备的功能，不仅仅是用户界面。我们了解了如何为您的应用使用地理定位和加载地图，如何使用 AsyncStorage 来保存数据，如何使用原生警报来共享应用中的重要信息，如何使用 WebView 来加载 HTML5 内容，以及如何使用动画。
ReactNative IOS 开发教程（一）
龙哥盟
08-19 1054
</script>
React Native 环境搭建——IOS环境
qq_58151324的博客
07-04 1853
React Native 环境搭建
React Native 混合开发与实现
weixin_30919235的博客
08-15 226
关于 微信公众号：前端呼啦圈（Love-FED） 我的博客：劳卜的博客 知乎专栏：前端呼啦圈 前言 随着 React 的盛行，其移动开发框架 React Native 也收到了广大开发者的青睐，以下简称 RN。通过 RN 我们能够使用 JavaScript 语言来实现跨平台移动应用的开发，打开了前端工程师通往移动平台的大门。用 RN 官方的介绍来概括它的特点就是：Learn once, wri...
React Native 混合开发多入口加载方式详解
10-16
本文详细介绍了在React Native混合开发中实现多入口加载的不同方式。 首先，开发者会使用RCTRootView组件来挂载React Native的视图。RCTRootView是React Native在iOS原生代码中嵌入React Native视图的接口。通过...
ReactNative开发的iOS和Android弹出对话框
08-08
React Native是一种由Facebook开发的开源框架，它允许开发者使用JavaScript来构建原生的iOS和Android应用程序。这个项目“jacklam718-react-native-popup-dialog-0b79c20”显然是一个专门针对React Native的弹出...
基于React Native+Redux的iOS混合开发项目.zip
02-08
在本项目"基于React Native+Redux的iOS混合开发项目.zip"中，我们主要探讨的是如何利用React Native框架和Redux状态管理库来实现一个跨平台的iOS应用开发。React Native是Facebook推出的一个开源框架，它允许开发者...
前端系列：大前端的工程实践：iOS篇| Android篇混合式开发篇-ReactNative，Weex，Weapp
02-05
本篇文章将重点讨论混合式开发，特别是针对iOS和Android的解决方案——React Native、Weex以及微信小程序（WeApp）。 React Native是由Facebook推出的开源框架，它允许开发者使用JavaScript和React组件库来构建原生...
React Native环境搭建：ios环境搭建
weixin_50096821的博客
03-09 3347
按照React Native官网的环境搭建过程，我们启动项目后总会遇到很多奇奇怪怪的环境问题。通过几天的折腾，终于完美地将React Native项目给启动了起来。以下是我通过mac（catalina 10.15.7）搭建React Native环境的过程，m1的mac不作为参考。大家按照以下步骤进行搭建后可能会遇到不同的问题，可以通过评论留言，共同解决。 环境搭建分为两个部分，分别是ios环境搭建和android环境搭建，由于篇幅过长，所以分为了两个部分，以下是ios环境搭建过程。 1.安装cocoap
iOS React Native 混合开发集成React Native
星宇大前端
07-24 4433
序：    有时候我们并不是需要全部使用React Native,我们想和原生混合开发，那我们应该怎么办呢。 先看一下我集成完之后的项目目录： 首先安装React Native node组件        1、新建一个文件夹如目录中的RN，这个文件夹用于存放React Native相关内容        2、新建一个package.
React-Native for iOS
大牛的专栏
07-26 375
1.Xcode 6.3以上版本 2.安装Home-brew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 3.安装node.js brew install node 4.安装express npm install -g expre
iOS 开发是否要采用 React Native?
weixin_33895016的博客
11-20 148
前言React Native 是 Facebook 2015年开源的 Javascript 框架，旨在使用 Javascript 高效开发手机端 App。配合着多个显而易见的优势和 Facebook 强大的宣传机器，它立刻成为国内外大小公司的明星开发框架。开源社区的参与激情、各方博客的宣传追捧，从其 Github 上 56000+ 星和 13000+ Fork 就可见一斑。 对于 React Na...
iOS-搭建 React Native 开发环境
MinggeQingchun的博客
06-13 1000
一、ReactNative简介ReactNative是移动端目前最热的框架之一, 着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)。Facebook 已经在多项产品中使用了React Native，并且将持续地投入建设React Native。React Native 可以通过更新远端JS，直接更新app, 用 JavaSc...
iOS--React Native浏览器插件
weixin_34090562的博客
12-13 118
一：介绍 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。 在React Na...
React Native 结合 iOS 混合开发
qq_44675204的博客
05-26 657
举例比较简单，诣在展示 React Native 与 IOS 原生平台如何桥接。
作为一个iOS开发者，使用ReactNative四个月的见解
chelongfei的博客
08-08 2187
作为一名iOS开发者，OC两年半，swift两年，来到新公司四个月，由于职能的原因（公司项目是由ReactNative搭建的，从过来到项目上线，逐渐完成react native在原生端的工作，慢慢进入到无事可做的境地，于是开始慢慢研究原生组件封装供react native调用，到后来的完全从前端同学手上接过项目，负责迭代和维护），也开始慢慢进入到react native的开发中。 首先对于这门语...
React Native (二) ios打包到真机
weixin_30607659的博客
01-28 220
每当在模拟器上完成了开发，都想到真机上试试，正好前段时候淘了一个imac。 这里就以打包rndemo到iphone为例，讲一下react ntive ios打包到真机的流程。 一、前置 1.有个iphone加个mac 2.首先react native的环境要正确安装，还未完成这一步的，请到react native官网或中文站查看具体流程 3.xcode等环境安装完毕 4...
iOS原生与React Native混合开发入门Demo示例
资源摘要信息: "iOS原生与React Native混合开发入门Demo示例" 在iOS开发领域，原生开发和React Native（简称RN）混合开发是两种常见的开发模式。原生开发指的是使用Swift或Objective-C语言直接开发iOS应用，能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值