集成ReactNative到现有Ios工程

前段时间刚接触了ReactNative,感觉还不错。今天心血来潮就把这边文章分享给大家,好了让我们直奔主题吧!

1.搭建ReactNative开发基础环境可以根据http://reactnative.cn/docs/0.31/getting-started.html文档来配置,安装必须的工具

2.创建一个Ios工程 TestRTC

3.进入到工程根目录下面执行安装ReactNative命令行工具  npm install -g react-native-cli

4.在工程的根目录下面创建一个React文件夹 来存放RN的相关文件

5.在React文件夹下创建一个package.json文件,用于初始化RN(这里面的package.json最好是在初始化一个工程里面copy过来 以保证是最新的react、reactnative版本,初始化项目命令react-native init AwesomeProject ),package.json里面的name要和ios工程里面的名字一样即:”name”:”TestRTC”

6.安装ReactNative的依赖包 进入到React目录下面执行npm install

7.安装成功后创建index.ios.js(在React目录下),可以从上面说的初始化的 AwesomeProject工程里面copy过来 (不过index.ios.js里面的项目名要对应 和你ios工程名一样即可).

8.使用Cocoapods自动集成Reactnative,在工程的根目录下创建Podfile文件

Pod file文件内容为

target ‘TestRTC‘ do

pod ‘React‘, :path => ‘./ReactComponen/node_modules/react-native‘, :subspecs => [

‘Core‘,

‘ART‘,

‘RCTActionSheet‘,

‘RCTAdSupport‘,

‘RCTGeolocation‘,

‘RCTImage‘,

‘RCTNetwork‘,

‘RCTPushNotification‘,

‘RCTSettings‘,

‘RCTText‘,

‘RCTVibration‘,

‘RCTWebSocket‘,

‘RCTLinkingIOS‘,

]

end

9.然后执行pod install --verbose --no-repo-update 安装

10.以上步骤执行完之后集成RN到工程已经大功告成,下面就看怎么应用RN在Xcode里面

随便创建一个Controller,代码如下图

现在就可以运行Xcode了。

11.运行后跳转到从oc跳转到RN界面的时候会出现红屏,这时候不用慌,仔细看错误之后你会发现是npm服务没有起来,然后在控制台进入到React目录下执行npm start 命令 ,在重新运行工程你会发现reactNative界面就可以展现在我们面前了

12.ok大功告成

时间: 2024-10-09 03:08:21

集成ReactNative到现有Ios工程的相关文章

Cordova-在现有iOS工程自动化接入Cordova插件

模拟Cordova插件命令 自己编写脚本,了解cordova添加插件做了哪些事情. 上一篇文章了解到,web与native的交互主要是cordova.js中的exec方法调用,触发交互事件.UIWebView已经成为过去时,忽略,这里只说wkwebview,exec调用wk的configuration.userContentController中注册的事件cordova,触发回调userContentController:didReceiveScriptMessage: 先聊web端,再聊iOS

关于 flutter1.12.13版本+flutter_boost1.12.13集成到android 和 ios工程

1.android 参考https://blog.csdn.net/qq_28478281/article/details/104202109 碰到的问题: 1.ERROR: Unable to resolve dependency for ':[email protected]/compileClasspath' native android项目需要添加下载so库的链接 2.ios 参考https://juejin.im/post/5d79af99e51d453c11684ce8 和之前版本差

给iOS工程增加Daily Build

给iOS工程增加Daily Build  前言 Daily Build 是一件非常有意义的事情,也是敏捷开发中关于 “持续集成” 的一个实践.Daily Build 对于开发来说有如下好处: 保证了每次 check in 的代码可用,不会造成整个工程编译失败. 进度跟进.产品经理可以每天看到最新的开发进度,并且试用产品,调整一些细节.很多时候,一个新功能,你真正用了一下才能有体会好或不好,所以 daily build 也给产品经理更多时间来调理他的设计. 需求确认.产品经理可以确认开发的功能细节

如何将 iOS 工程打包速度提升十倍以上

如何将 iOS 工程打包速度提升十倍以上 过慢的编译速度有非常明显的副作用.一方面,程序员在等待打包的过程中可能会分心,比如刷刷朋友圈,看条新闻等等.这种认知上下文的切换会带来很多隐形的时间浪费.另一方面,大部分 app 都有自己的持续集成工具,如果打包速度太慢, 会影响整个团队的开发进度. 因此,本文会分别讨论日常开发和持续集成这两种场景,分析打包速度慢的瓶颈所在,以及对应的解决方案.利用这些方案,笔者成功的把公司 app 的持续集成时间从 45 min 成功的减少到 9 min,效率提升高达

编译依赖于React Native0.46.4的React Native IOS工程时,出现错误“fatal error: 'React/RCTEventEmitter.h' file not found”

我的环境: WebStorm 2017.2Build #WS-172.3317.70, built on July 14, 2017 JRE: 1.8.0_152-release-915-b5 x86_64JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o Mac OS X 10.12.6 Xcode8.3.3(8E3004b) 网上搜索,可以解决我的问题的网址:https://stackoverflow.com/questions/41663002

iOS工程 与 资源文件 和 Bundle

在简单的app中,可能只会用到工程,但是项目越大,越复杂,就会需要拆分项目,将各个功能拆散到各个工程中. 可以使用worksapce来管理工程集合. 但是资源文件却不好管理,因为xcode默认只能添加自己工程内,或者子工程的资源文件到target中. 如果是平级的工程,怎么添加呢?可以使用bundle bundle虽然是os x中的资源类型,但是是兼容iOS的 我们可以先创建一个os x的bundle,然后修改其编译类型为iOS的 调整base sdk即可 然后添加资源文件(png,xib,st

现有IOS设备唯一标示符的方案比较

现有IOS设备唯一标示符的方案比较 UDID [[UIDevice currentDevice] uniqueIdentfier] iOS官方最早提供的UDID方案,根据某一公式,使用设备序列号.网卡地址等信息作为参数计算而来,iOS6之后该计算公式发生了改变. 该方法返回的结果在所有应用中都相同,并且卸载应用.刷机.还原设备均不会发生改变,是最为准确的设备唯一标示符. iOS5之后,该方法被标记为废弃!最终,在2013年5月1号之后,AppStore禁止任何使用该方法的应用上架. iOS7中对

xcode的ios工程目录结构复习

目录结构: a.supporting files: main.m和资源文件 xxx-info.plist:包含应用程序相关属性列表,如版本,程序名等 .pch文件:预编译头文件,相当于MFC里的stdafx.h,默认已经包含了常用的头文件 .strings文件:国际化字符串资源 图片等其他资源 b.frameworks: 程序需要的外部库文件,默认已经包含常用的库,如UIKit,Foundation等库 c.products: 生成执行文件所在目录 d.xib文件:视图文件,提供给interfa

iOS工程中的info.plist文件的完整研究

原地址:http://blog.sina.com.cn/s/blog_947c4a9f0100zf41.html 们建立一个工程后,会在Supporting files下面看到一个"工程名-Info.plist"的文件,这个是对工程做一些运行期配置的文件,很重要,不能删除. 如果你在网上下载的工程中的这个文件名只是Info.plist,那么恭喜你,这个工程太老了,是用包含SDK2.0以前的Xcode生成的,不过没关系,不影响使用. 如果你使用文本编辑器打开这个文件,你会发现这是一个XM