怎么从react-reactnative 跳转页面跳转到ios原生viewcontroller20170819 10:00

来源：蜘蛛抓取(WebSpider) 时间：2017-08-19 02:00 标签： react native页面跳转
【第575期】在iOS项目中导入React Native
前言看到这个玩法的时候，早读君只是万万没想到。现在在native App中存在的web页面基本是内嵌，那今天来来看看由@谢许峰分享的这篇关于ios与react native的融合。正文从这开始～React Native的势头越来越猛，但凡提及Native，皆是一片666，大有替代原生APP的趋势，也许Native有着大好形势，但目前看来，尚有太多不足。开始在iOS原生项目中动态使用React Native定制界面如果你已经是一个iOS开发者，继续原生项目开发可能是更好的选择，而React Native，也许更加适合原生项目中部分动态页(例如广告、咨询详情)的编写，方便页面的多端重用和即时修改。完整项目Github地址1.安装环境如果你之前只接触过iOS开发，使用终端也仅限于CocoaPods、Git，那么环境配置一定会费一番劲。安装Node.jsNode.js官方下载：https://nodejs.org/en/download/在官网可以下载到对应系统的Node安装包，非常简单&&&&&&&推荐使用nvm安装管理Node.js，能够更好的控制node的版本&&&&&&&&nvm github地址：/creationix/nvm&&&&&&&&中文安装方法：/articles/vmi6Zv7安装CocoaPodsCocoaPods是iOS开发最常用的依赖管理工具CocoaPods安装使用方法：唐巧blog2.iOS原生项目我们需要准备一个简单的原生项目SimpleNative，选用的语言是Swift在Main.storyboard中初始化项目框架：导航控制器内有两层视图控制器，在第一层Controller中居中设置一个button用来push，第二层Controller空白待用3.初始化React Native的node依赖1.初始化node在终端中，定位到iOS项目的根目录，运行npm init然后一路回车即可注意：node项目的命名不能使用大写字母，所以指定name时输入simple-native&后回车执行完毕之后，在项目根目录下生成了一个package.json文件，类似于CocoaPods的Podfile文件，用来管理项目依赖2.安装React Native再项目根目录下运行npm install --save react-native由于国内的网络问题，npm安装比较缓慢，可以使用淘宝npm镜像替代安装完毕之后，根目录下会生成node_modules文件夹，里面保存了react和react-native的依赖--save参数会在package.json文件中保存react和react-native的依赖声明4.初始化CocoaPods在项目根目录下，运行pod init在项目根目录下生成了Podfile，用任何编辑器打开，编写React Native的依赖在项目的target下，pod导入React，路径指向了当前目录下'./node_modules/react-native'，然后还有一堆乱七八糟的子依赖(一个都不能少！)运行pod install安装依赖，本地安装速度很快5.绑定Native的视图1.导入Native View由于使用的是Swift项目，我们需要一个OC-Swift桥接文件导入Native的类，在桥接文件夹导入#import &RCTRootView.h&2.设置Native View点击SimpleNative.xcworkspace打开iOS项目，新建一个ReactView继承于UIView，并为这个view添加RCTRootView的子视图然后在第二层控制器中居中显示一个View，并绑定为ReactView再次运行项目，点击push按钮后，就会见到第一个红彤彤的Native错误了，但是这表示已经成功绑定了Native6.启动Native服务在ReactView的初始化中，我们为rootView指定了bundleURL和moduleName，其中moduleName既是当前项目名，而bundleURL，就要一步一步实现了，步步都是坑
工程物资账务处理最新文章
微信号：congyechinaacc扫描二维码关注公众号
中华会计网校总结历年成功辅导经验,结合全国会计从业的命题规律、重点、难点,融入先进的教学理念,大胆创新,推出2014年各地会计从业考试特色班、精品班、实验班个性化辅导.学员自付费之日起可不限时间、次数重..工程物资账务处理
Copyright2017.杨邱自媒体资讯站，让大家及时掌握各行各业第一手资讯新闻！拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(396b82-ua98).
重新安装浏览器，或使用别的浏览器

我要回帖

更多关于 react native页面跳转 的文章

 

随机推荐