react native 之 在现有的iOS工程中集成react native
在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路
参考官网教程:https://reactnative.cn/docs/integration-with-existing-apps/
但是会有一些步骤报错,这里记录一下。首先我的项目结构是这样:
RNTEST 是最外面的文件夹的名字,也是iOS项目的名字。ios/ 下是iOS项目文件。
npm安装RN依赖都没问题,按照官网步骤来
最主要的是
cd ios
pod install
会报错。。。
错误提示是找不到XXX索引库,在Podfile文件中将这些对应的注释掉:
Podfile文件参考:https://github.com/facebook/react-native/blob/v0.60.0/template/ios/Podfile
platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' target 'RNTEST' do
# Pods for HelloWorld
pod 'React', :path => '../node_modules/react-native/'
pod 'React-Core', :path => '../node_modules/react-native'
#pod 'React-DevSupport', :path => '../node_modules/react-native/React'
#pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
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-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket' 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 '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' use_native_modules!
end
结果:
之后就是在iOS工程中写相关代码, 可以运行起来,但是在Native调RN时
然后发现又报错了,改了package.json中的版本如下:
就可以了。
iOS项目代码参考的是慕课网上的教程。
要想在iOS中加载一个JSX页面,有两种方式:
一:在控制器导入头文件
//#import <React/RCTBundleURLProvider.h>
//#import <React/RCTRootView.h>
//#import <React/RCTEventEmitter.h>
然后加载JSX中注册的模块
// NSURL *jsCodeLocation;
//
// jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
//
// RCTRootView *rootView =
// [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
// moduleName: @"App"
// initialProperties:nil
// launchOptions: nil];
// self.view = rootView;
上面这个moduleName (任意取,但是要与OC中一致才能加载对应页面)就是在index.js中的这个:
import {AppRegistry} from 'react-native'
import App from './App';
import App2 from './App2';
AppRegistry.registerComponent('App1',()=>App);
AppRegistry.registerComponent('App2',()=>App2); AppRegistry.registerComponent('App3',()=>App2);
二:借鉴AppDelegate中加载方式,首先导入头文件,遵循代理,实现代理方法,加载index.js中的模块
//
// RNPageController.m
// RNTEST
//
// Created by LiuWei on 2019/10/18.
// Copyright © 2019 udc. All rights reserved.
// #import "RNPageController.h" //#import <React/RCTBundleURLProvider.h>
//#import <React/RCTRootView.h>
//#import <React/RCTEventEmitter.h> #import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h> @interface RNPageController ()<RCTBridgeDelegate> @end @implementation RNPageController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
// [self initRCTRootView]; RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"App1"
initialProperties:nil];
self.view=rootView;
} //-(void)initRCTRootView{
// NSURL *jsCodeLocation;
//
// jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
//
// RCTRootView *rootView =
// [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
// moduleName: @"App"
// initialProperties:nil
// launchOptions: nil];
// self.view = rootView;
//} - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
@end
以上这种开发方式最终打包 ipa时,
先在ios/ 下创建一个 release_ios/
然后执行命令生成必要的jsbundle文件和图片资源文件
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/
--platform ios
:代表打包导出的平台为iOS;--dev false
:代表关闭JS的开发者模式;-entry-file index.js
:代表js的入口文件为index.js
;--bundle-output
:后面跟的是打包后将JS bundle包导出到的位置;--assets-dest
:后面跟的是打包后的一些资源文件导出到的位置;
好了之后将生成必要的jsbundle文件和图片资源文件拖进iOS项目
接下来就可以打包了
特别注意:如果项目用到了CodePush热更新:加载js文件的方式变成这样
...
NSURL *jsCodeLocation;
#ifdef DEBUG jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else jsCodeLocation = [CodePush bundleURL];
#endif ...
最后Demo地址:https://github.com/nwgdegitHub/OCCallRNDemo.git
react native 之 在现有的iOS工程中集成react native的更多相关文章
- iOS原生项目中集成React Native
1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...
- iOS原生项目集成React Native模块
今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块: 注意事项: 1.因为react native的版本问题,部分细节可能有所不 ...
- iOS 工程中文件变成红色是什么情况
iOS 工程中文件变成红色是原有的文件路径改变了,系统找不到了.
- 使用脚本删除ios工程中未使用图片
使用脚本删除ios工程中未使用图片 最近在读唐巧大神的<iOS开发进阶>,学到了一个大招:使用脚本删除ios中未使用的图片(纸书上有点小问题,参考github上的issue:使用脚本删除i ...
- 把 Reative Native 47 版本集成到已有的 Native iOS 工程中
一.搭建开发环境 http://reactnative.cn/docs/0.46/getting-started.html#content 二.创建一个模板 运行以下命令,创建一个最新版本的 reac ...
- iOS工程中的info.plist文件的完整研究
原地址:http://blog.sina.com.cn/s/blog_947c4a9f0100zf41.html 们建立一个工程后,会在Supporting files下面看到一个"工程名- ...
- iOS工程中的info.plist文件
我们建立一个工程后,会在Supporting files下面看到一个"工程名-Info.plist"的文件,这个是对工程做一些运行期配置的文件,很重要,不能删除. 如果你在网上下载 ...
- 使用 Swift 在 iOS 10 中集成 Siri —— SiriKit 教程
下载 Xcode 8,配置 iOS 10 和 Swift 3 (可选)通过命令行编译 除 非你想使用命令行编译,使用 Swift 3.0 的工具链并不需要对项目做任何改变.如果你想的话,打开 Xcod ...
- iOS开发中集成Reveal
[转]http://blog.devzeng.com/blog/ios-reveal-integrating.html 配置方式一简介有效. Reveal 是一个界面调试工具.使用Reveal,我们可 ...
随机推荐
- 【MM系列】SAP MB5B中FI凭证摘要是激活的/结果可能不正确 的错误
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MB5B中FI凭证摘要是激活 ...
- LeetCode算法题-Shortest Distance to a Character(Java实现)
这是悦乐书的第321次更新,第343篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第191题(顺位题号是821).给定字符串S和字符C,返回一个整数数组,表示字符串中所有 ...
- scala加载spark MLlib等所有相关jar的问题
1.找到spark安装目录 E:\spackLearn\spark-2.3.3-bin-hadoop2.7\jars 里面放的是spark的所有依赖jar包 2.从idea里面javalib导入即可调 ...
- supervisor启动elk7.4.0组件
es [program:elasticsearch] command = /srv/app/elk/elasticsearch/bin/elasticsearch autostart = true s ...
- win10安装mysql时报错[MY-012576] [InnoDB] Unable to create temporary file; errno: 2
报错信息 解决: 在my.ini文件里面的 [mysqld]区段内加入: #自己指定的临时文件目录 tmpdir="临时目录" 添加好后初始化成功 接下来启动mysql服务的时候报 ...
- uva-796.critical links(连通图的桥)
本题大意:求出一个无向图的桥的个数并且按照顺序输出所有桥. 本题思路:注意判重就行了,就是一个桥的裸题. 判重思路目前知道的有两种,第一种是哈希判重,第二种和邻接矩阵的优化一样,就是只存图的上半角或者 ...
- webpack e6转化成es5 配置方法
方法一: https://www.babeljs.cn/setup#installation 按照babel官方的配置配 方法二: https://www.jianshu.com/p/ce28cedd ...
- phpstudy添加PHP
想在phpstudy2018里面增加一个php版本,操作如下: 一.下载php-7.2.19-ts文件,解压缩,放在相应的目录下: 二.修改Apache的配置文件1.修改httpd.conf 配置,D ...
- C++中构造函数的手动和自动调用方式
1,对象的构造通过构造函数来完成,和类名相同且没有返回值,这个时候只有参 数一个特性,构造函数可以自定义参数,这个参数一般而言就是对类进行初始 化来使用的:带有参数的构造函数的意义在于可以使得每 ...
- 只使用非递归的mutex
mutex分为递归(以下简写为rm)和非递归(以下简写为nrm)两种,它们的唯一区别在于:同一个线程可以重复对rm加锁,但是不能重复对nrm加锁. 虽然rm使用起来要更加方便一些,并且不用考虑一个线程 ...