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

在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...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值