现有iOS项目集成React Native过程记录
在《Mac系统下React Native环境搭建》配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用它,只是有时安装库很慢,还不如复制粘贴库来的快,就删除它了,这里就使用手动集成的方式吧。
1. 新增React Native文件路径和json说明文件,进入项目根目录(*.xcodeproj文件所在目录):
mkdir reactnative
cd reactnative
vim package.json : 用于初始化react native
文件内容为:
{
"name": "<项目名称>",
"version": "3.0.1612090",
"private": true,
"dependencies": {
"react": "^0.14.8",
"react-native": "^0.22.2"
}
}
执行"npm install",会在当前目录(reactnative)生成node_modules子目录,里面包含react-native包含的所有包:
npm install完成:
2. 在reactnative目录下新增index.ios.js文件:
3. 添加React Native依赖包(添加自己需要用的包就可以了):
1. 添加"React.xcodeproj"项目到现有项目:
2. 添加"RCTNetwork.xcodeproj":
3. 添加"RCTText.xcodeproj":
4. 添加"RCTWebSocket.xcodeproj":
5. 添加"RCTActionSheet.xcodeproj":
添加完后项目结构如下:
4. 添加frameworks:
5. 添加搜索的头文件地址:
在Header Search Paths增加一行:
增加后如下:
6. 运行,报如下错误:
在方法前加"(void)"即可,如下:
还有一个属性访问错误,很简单,修改即可。再次编译,可以了。
7. 测试react native功能:
1. 增加View,用来显示react native的文件内容:
2. 实现ReactViewTest.m :
3. 自定义view完成了,编写控制器将其展现出来:
8. 测试运行
先启动react-native服务端:
在reactnative目录下执行:"react-native start"
在项目的info.plist增加配置:
这里使用的是真机调试,因此,需要修改localhost为ip地址,且电脑和手机需要连接在同一个网络。
运行:
结果如下:
服务端输出如下:
可以看到,每次修改js文件,都是动态更新页面传输到手机上,刷新重新显示即可。
9. 发布时:
开发时从服务端获取渲染文件,发布时,就需要将文件打包为main.jsbundle了:
使用命令”curl http://192.168.1.102:8081/index.ios.bundle -o main.jsbundle“
在项目添加这个文件,修改ReactViewTest:
为了测试效果,关闭react native服务端,运行APP,可以正确从本地加载显示,完成了。
后面就可以按需继续使用js和原生来混合开发了。
现有iOS项目集成React Native过程记录的更多相关文章
- iOS原生项目集成React Native模块
今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块: 注意事项: 1.因为react native的版本问题,部分细节可能有所不 ...
- iOS原生项目中集成React Native
1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...
- react native 之 在现有的iOS工程中集成react native
在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/d ...
- iOS 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
- 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
- 一个资深iOS开发者对于React Native的看法
一个资深iOS开发者对于React Native的看法 当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javasc ...
- [转] 一个资深iOS开发者对于React Native的看法
当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很 ...
- Android 工程集成React Native 0.44 注意点
当前(2017年5月22日 )React Native开发相当火爆,但是搜索下来,没有最新版本0.44集成的教程,因此尝试了一下如何集成到Android原生工程中去.本篇旨在记录出现的问题以及应对方式 ...
- 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
随机推荐
- 在脚本中使用sudo命令,将密码保存在脚本中,不需要手动输入密码
在脚本中使用sudo命令,将密码保存在脚本中,不需要手动输入密码. #!/bin/bash echo 'xxx密码xxx'|sudo -S service mysql start echo 'xxx密 ...
- Robot Framework 安装步骤
1. 安装python 2.7.11, 并添加环境变量到PATH.在cmd验证python是否安装成功. 2. 解压pip-8.1.1.tar.gz,执行python setup.py insta ...
- ORM之殇,我们需要什么样的ORM框架?
最近在研究ORM,究竟什么样的框架才是我们想要的 开发框架的意义在于 开发更标准,更统一,不会因为不同人写的代码不一样 开发效率更高,无需重新造轮子,重复无用的代码,同时简化开发流程 运行效率得到控制 ...
- saltstack初探
salt-key -y -d linux-node1 #删除linux-node1节点的认证 salt -G 'cpuarch:x86_64' grains.item num_cpus >> ...
- MySQL点滴
1. 只安装Server和Workbench即可: 2. 安装时安装Windows服务,可以在“管理 > 服务”中开启关闭服务: 3. mysql -uroot -p1234 4. PHP Fa ...
- shell条件判断与流程控制
一 条件判断式语句 1.按文件类型进行判断 测试类型 作用 -b 文件 判断文件是否存在,并且是否为块设备文件(是块设备文件为真) -c 文件 判断文件是否存在,并且是否为字符设备文件(是字符设备设备 ...
- 室内定位系列(三)——位置指纹法的实现(KNN)
位置指纹法中最常用的算法是k最近邻(kNN):选取与当前RSS最邻近的k个指纹的位置估计当前位置,简单直观有效.本文介绍kNN用于定位的基本原理与具体实现(matlab.python). 基本原理 位 ...
- Solved: “Cannot execute a program. The command being executed was \roslyn\csc.exe”
When you publish your ASP.NET project to a hosting account such as GoDaddy, you may run into the iss ...
- bootstrap1
让bootstarp3 支持ie的兼容模式: 支持浏览器的响应式布局: 是指网页既可以用在pc上,也可以用在手机上, 而且不需要修改源文件. bootstrap包括: css文件, 只需要加载: cs ...
- PHP延迟静态绑定
类可以自下往上调用父类方法,如果需要在父类中根据不同的子类,来调用子类的方法,那么就需要延迟静态绑定.延迟静态绑定用的是保留关键词static. 所谓延迟静态绑定,顾名思义,静态调用时::符号左侧的部 ...