在 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
命令来初始化一个 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
第一步:配置 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 混合开发解说的视频教程
- 为 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 混合开发解说的视频教程 中再具体的解说;
- 运行 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 中用到了一些图片资源的话)。
将 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 混合开发解说》
实例源码
- 实例源码
举荐浏览
- 淘宝怎么设置微博一键中转?
- 淘宝首页如何设置微博一键中转?
- 手机淘宝首页如何制作一键中转微博链接
- 淘宝怎么设置微博一键中转?