关于react-native:新版React-Native-混合开发iOS篇

4次阅读

共计 9480 个字符，预计需要花费 24 分钟才能阅读完成。

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

混合开发的一些其余利用场景：

在原有我的项目中退出 RN 页面，在 RN 我的项目中退出原生页面

原生页面中嵌入 RN 模块

RN 页面中嵌入原生模块

Native UI Components

以上这些都属于 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 的组件；
运行、调试、打包、公布利用；
升职加薪、迎娶白富美，走向人生巅峰！；

创立一个 React Native 我的项目[](https://www.devio.org/2020/04…

在做混合开发之前咱们首先须要创立一个没有 Android 和 iOS 模块的 React Native 我的项目。咱们能够通过两种形式来创立一个这样的 React Native 我的项目：

通过 npm 装置 react-native 的形式增加一个 React Native 我的项目；
通过 react-native init 来初始化一个 React Native 我的项目；

通过 `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 我的项目。

react-native init RNHybrid

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

增加 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

接下来咱们须要为曾经存在的 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 混合开发解说的视频教程

因为咱们的 RNHybridiOS 利用须要加载本地服务器上的 JS Bundle，而且是 http 的协定传输，所以须要设置App Transport Security Settings，让其反对 http 传输，否则会呈现如下谬误：

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

通过上述两步，咱们曾经为 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 混合开发解说的视频教程

为 React Native 创立一个 ViewController 和 RCTRootView 来作为容器

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

首先咱们须要创立一个 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 混合开发解说的视频教程 中再具体的解说；

运行 React Native

通过上述的步骤，咱们曾经实现了对一个现有 iOS 我的项目 RNHybridiOS 增加了 RN，并且创立了一个 RNPageController 来加载咱们在 JS 中注册的名为 App1 的 RN 组件。

接下来咱们来启动 RN 服务器，运行 RNHybridiOS 我的项目关上 RNPageController 来查看成果：

npm start

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

而后咱们关上 Xcode，点击运行按钮或者通过快捷键 Command+R 来将 RNHybridiOS 装置到模拟器上：

增加更多 React Native 的组件

咱们能够依据须要增加更多的 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 组件即可。

调试、打包、公布利用

调试这种混合的 RN 利用和调试一个纯 RN 利用时一样的，都是 Command + D 关上 RN 开发者菜单，Command + R 进行 reload JS，另外大家也能够通过学习[](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 中用到了一些图片资源的话)。

这一步咱们须要用到 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 利用咱们须要有一个 99 美元的账号用于将 App 上传到 AppStore，或者是 299 美元的企业级账号用于将 App 公布到本人公司的服务器或第三方公司的服务器。

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

因为官网文档中有具体的阐明，在这我就不再反复了。

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

实例源码

淘宝怎么设置微博一键中转？
淘宝首页如何设置微博一键中转？
手机淘宝首页如何制作一键中转微博链接
淘宝怎么设置微博一键中转?

正文完

react-native

发表至： react-native

2020-09-19

0

关于react-native:2020-ReactNative-系列之-reactnativesplashscreen

关于react-native:记录使用React-Native开发App全过程

关于react-native:ReactNative071正式版发布Ts作为首要开发语言

关于react-native:RN动态加载

关于php:xampp环境下thinkphp5二维码的生成

关于react-native:新版React-Native-混合开发iOS篇

通过 `npm` 装置 react-native 的形式增加一个 React Native 我的项目

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

第一步：配置 CocoaPods 依赖

第二步：设置 App Transport Security Settings

3. 创立 index.js 并增加你的 React Native 代码

创立 RNPageController

调试

打包

将 js bundle 包和图片资源导入到 iOS 我的项目中

公布 iOS 利用

实例源码

举荐浏览

站内搜索

关于react-native:新版React-Native-混合开发iOS篇

通过 npm 装置 react-native 的形式增加一个 React Native 我的项目

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

第一步：配置 CocoaPods 依赖

第二步：设置 App Transport Security Settings

3. 创立 index.js 并增加你的 React Native 代码

创立 RNPageController

调试

打包

将 js bundle 包和图片资源导入到 iOS 我的项目中

公布 iOS 利用

实例源码

举荐浏览

站内搜索

通过 `npm` 装置 react-native 的形式增加一个 React Native 我的项目