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

49次阅读

共计 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 的组件；
  • 运行、调试、打包、公布利用；
  • 升职加薪、迎娶白富美，走向人生巅峰！；
  1. 创立一个 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 命令来初始化一个 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 代码

通过上述两步，咱们曾经为 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 来作为容器

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

创立 RNPageController

首先咱们须要创立一个 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

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

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

npm start

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

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

  1. 增加更多 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 组件即可。

  1. 调试、打包、公布利用

调试

调试这种混合的 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 中用到了一些图片资源的话)。

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

这一步咱们须要用到 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 利用

公布 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:ReactNative中metro构建缓存导致的事故
关于react-native:React-NativeScrollView横向滚动的嵌套
关于react-native:ReactNative071正式版发布Ts作为首要开发语言
关于react-native:React-Native框架开发介绍以及其优点