给iOS开发者的React Native入门使用教程
目录
- 一. 原生iOS项目集成React Native
- 二. 原生跳转RN页面
- 三. 显示豆瓣热门电影列表
- 四. 改为导航
- 五.完整源代码
一. 原生iOS项目集成React Native
创建一个新的文件夹,如RNProject,然后新建一个/ios的子文件夹,将已有的iOS项目全部文件复制进去。
在RNProject根目录创建package.json文件,内容如下:
{"name": "RNProject","version": "1.0.0","private": true,"scripts": {"start": "yarn react-native start"}
}
- 打开终端,cd到项目根目录,执行以下命令集成React Native模块:
$ yarn add react-native
- 等待上一步完成后,注意红框内的提示,表示需要依赖指定版本的react。我们以下命令集成react,注意版本号需要严格按照提示的要求:
$ yarn add react@16.8.3
此时所有集成的依赖都在node_modules/目录下,做git版本控制时,不应该上传此文件夹的所有文件,而是让其他协作者也执 行以上命令来添加依赖。因此应该将node_modules/目录记录到.gitignore文件中。
- 通过cocoaPods将React Native集成到iOS项目中。默认你已经熟悉并安装了cocoaPods。在终端中,cd到/ios目录下,初始化cocoaPods:
$ pod init
打开Podfile文件,编辑为如下内容:
# The target name is most likely the name of your project.
target 'RNProject' do# Your 'node_modules' directory is probably in the root of your project,# but if not, adjust the `:path` accordinglypod 'React', :path => '../node_modules/react-native', :subspecs => ['Core','CxxBridge', # Include this for RN >= 0.47'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43'RCTText','RCTImage','RCTNetwork','RCTWebSocket', # Needed for debugging'RCTAnimation', # Needed for FlatList and animations running on native UI thread# Add any other subspecs you want to use in your project]# Explicitly include Yoga if you are using RN >= 0.42.0pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'# Third party deps podspec linkpod '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'end
注意target ‘RNProject’ do中为iOS项目的名称,而不是根目录名称,只是这里我的根目录和iOS项目名称均为RNProject。
保存Podfile后,执行以下命令开始安装:
$ pod install
至此,就已经成功在已有iOS项目中集成了RN,项目文件结构如下:
二. 原生跳转RN页面
- 苹果会阻止访问不安全的HTTP链接。我们需要在iOS项目的Info.plist的中添加:
<key>NSAppTransportSecurity</key>
<dict><key>NSExceptionDomains</key><dict><key>localhost</key><dict><key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key><true/></dict></dict>
</dict>
- 在根目录下创建index.js文件,作为React Native在iOS上的入口文件。并输入以下内容:
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';class Hello extends React.Component {render() {var {name} = this.propsreturn (<View style={{flex: 1,justifyContent: 'center',alignItems: 'center'}}><Text>Hello {name}!</Text></View>);}
}AppRegistry.registerComponent('Hello', () => Hello);
- 在Xcode中,创建一个ViewController,并输入以下内容:
#import "ViewController.h"
#import <React/RCTRootView.h>@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];button.center = self.view.center;[button setTitle:@"跳转RN" forState:0];[button setTitleColor:[UIColor greenColor] forState:0];[button addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside];[self.view addSubview:button];
}- (void)clickButton:(UIButton*)button{NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];RCTRootView *rootView =[[RCTRootView alloc] initWithBundleURL: jsCodeLocationmoduleName: @"Hello"initialProperties: @{@"name":@"React Native"}launchOptions: nil];UIViewController *vc = [[UIViewController alloc] init];vc.view = rootView;[self presentViewController:vc animated:YES completion:nil];
}@end
- 在根目录使用以下命令启动RN Packager
npm start
- 在Xcode中运行项目,运行后点击“跳转RN”后,既会跳转到RN实现的显示Hello React Native!的页面:
三. 显示豆瓣热门电影列表
每个页面应该对应独立的一个js文件,并且为了防止项目大了以后保持文件结构的清晰,我们为热门电影列表创建如下目录及文件:./src/page/HotMovie.js,在HotMovie.js中输入以下内容:
import React, {Component} from 'react';
import {StyleSheet, Image, Text, View, FlatList} from 'react-native';var REQUEST_URL = "https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&sort=recommend&page_limit=20&page_start=0"export default class HotMovie extends Component<Props> {constructor(props){super(props);this.state = {movies:null,}this.fetchData = this.fetchData.bind(this)}componentDidMount(){this.fetchData()}fetchData(){fetch(REQUEST_URL).then((response) => response.json()).then((responseJson) => {this.setState({movies:responseJson.subjects});})}render() {if (!this.state.movies) {return this.renderLoadingView();}return (<FlatListdata={this.state.movies}renderItem={this.renderMovie}style={styles.list}keyExtractor={item => item.id}/>);}renderLoadingView(){return (<View style={styles.container}><Text>正在加载...</Text></View>)}renderMovie({item}){return(<View style={styles.item}><Image source={{url:item.cover}} style={styles.thumbnail}/><View style={styles.itemRight}><Text>{item.title}</Text><Text>{item.rate}</Text></View></View>)}}const styles = StyleSheet.create({container: {flex:1,flexDirection:'row',alignItems:'center',justifyContent: 'center',alignItems: 'center',},item:{marginTop:1,flexDirection:'row',alignItems:'center',justifyContent: 'center',height:100,backgroundColor:'lightgray'},thumbnail:{width:53,height:81,backgroundColor:'lightgray'},itemRight:{flex:1,height:100,justifyContent: 'center',alignItems:'center'},list: {paddingTop: 50,backgroundColor: "#F5FCFF"}
});
2、将index.js修改为如下:
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
import HotMovie from './src/page/HotMovie';AppRegistry.registerComponent('HotMovie', () => HotMovie);
3、原生将按钮点击事件改为:
- (void)clickButton:(UIButton*)button{NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];RCTRootView *rootView =[[RCTRootView alloc] initWithBundleURL: jsCodeLocationmoduleName: @"HotMovie"initialProperties: nillaunchOptions: nil];UIViewController *vc = [[UIViewController alloc] init];vc.view = rootView;[self presentViewController:vc animated:YES completion:nil];
}
3、运行后的效果如图:
四. 改为导航
篇幅有点长啦,另开一篇继续 https://blog.csdn.net/dolacmeng/article/details/90414040
五.完整源代码
戳 https://github.com/dolacmeng/RNProject/tree/master
相关文章:

PHP Memcached应用实现代码
肖理达 (KrazyNio AT hotmail.com), 2006.04. 06, 转载请注明出处 一、memcached 简介 在很多场合,我们都会听到 memcached 这个名字,但很多同学只是听过,并没有用过或实际了解过,只知道它是一个很不错的东东。这里简单介绍一下&a…

顺F分享,你是在裸奔吗?
“ 对顺F旗下各APP顺藤摸瓜分析——顺F分享。”前文对顺F速运和顺F速运国际版进行了分析,二者使用同一套接口,虽然保护强度不高,但对代码和数据的保护却区别对待,实在让人诧异。秉承避免浪费的原则,我们将持续对顺F旗下…

静态链接库与动态链接库 (二)动态链接库的编译与使用
上一篇文章里大概描述linux下静态链接库的编译与使用,下面讲动态链接库的编译与使用方法。 1. 什么是动态链接库 所谓动态链接库,是指编译的时候不会把程序引用到的库插入到执行程序里,而是在执行时候才会去加载相关的库,所有用到…

【React Native】react-navigation导航使用方法
目录集成react-navigation使用react-navigation上一篇介绍了如何在已有iOS项目中集成React Native。这一篇我们把上一篇的demo做下拓展,添加点击电影跳转到详情页。页面跳转使用React Native推荐的第三方导航控件:react-navigation 集成react-navigatio…

请说明在.net中常用的几种页面间传递参数的方法,并说出他们的优缺点。
QueryString 传递一个或多个安全性要求不高或是结构简单的数值。但是对于传递数组或对象的话,就不能用这个方法了 session(viewstate) 简单,但易丢失 作用于用户个人,过量的存储会导致服务器内存资源的耗尽。 application 对象的作用范围是整个全局&am…

邮Z速递物流,让用户密码在网络中遨游
“ 最近分析快递行业的APP上瘾了,求解救。”邮政作为快递行业一个傻大黑的存在,一直很奇怪,我一直在纳闷,邮政和EMS到底是不是一家,在很多网点,它们是一体的存在,但很多东西,又是各自…

servlet response 中文乱码
先,response返回有两种,一种是字节流outputstream,一种是字符流printwrite。 申明:这里为了方便起见,所有输出都统一用UTF-8编码。 先说字节流,要输出“中国",给输出流的必须是转换为utf-8…

【React Native】iOS原生导航跳转RN页面
上一篇介绍了React Native使用react-navigation进行导航跳转页面,现在我们介绍下原生iOS中怎么导航进一个新的React Native页面。 一、原生跳转React Native 创建HYReactNativeManager管理类. 在HYReactNativeManager.h中声明实现声明RCTBridgeDelegate协议&…

mac 常用指令
苹果公司生产的Mac搭载OS x 系统,OS x基于Unix,所以很多指令都和linux大同小异。 以下是一些常用指令,一点点自己记录下,方便自己和他人。这篇文应该是长期更新的。 1.ls [选项] [目录名] 第一个当然是list 指令 列出目录的文件列…

如何高效地爬取链家的房源信息(一)
“Python实现的链家网站的爬虫第一部分。”在之前的文章,以链家成都站为例,分析过链家网站数据的爬取,文章如下:干货!链家二手房数据抓取及内容解析要点但是,当时没有根据分析,将爬取实现。本系…

HDU5886 Tower Defence 【两遍树形dp】【最长链预处理】
题意:N个点的一棵带权树。切掉某条边的价值为切后两树直径中的最大值。求各个边切掉后的价值和(共N-1项)。 解法一: 强行两遍dp,思路繁琐,维护东西较多: dis表示以i为根的子树的直径,…

NPOI读取Excel数据应用
NPOI 是 POI 项目的 .NET 版本。使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 WORD/EXCEL 文档进行读写。NPOI是构建在POI 3.x版本之上的,它可以在没有安装Office的情况下对Word/Excel文档进行读写操作。 需求:根据excel表格提供的SVN相…

pod setup慢的解决方法
最近使用pod setup更新CocoaPods本地检索库,无奈只有10几k,还中途报错。最终通过以下步骤,完成更新。 1.手动下载Specs检索库 执行pod setup后,实质是从github上clone检索库(https://github.com/CocoaPods/Specs&…

如何高效地爬取链家的房源信息(二)
“Python实现的链家网站的爬虫第二部分。”本系列文将以链家南京站为例,使用Python实现链家二手房源信息的爬虫,将数据爬取,并存入数据库中,以便使用。本系列第一部分:如何高效地爬取链家的房源信息(一&…

C#实现HttpPost提交文件
先建立一个WebApplication Web.config <?xml version"1.0" encoding"utf-8"?><configuration><system.web><!--<globalization requestEncoding"gb2312" responseEncoding"gb2312" fileEncoding"gb231…

16年10月18号2th运算符与流程结构
---恢复内容开始--- 2th: 一:运算符 算数运算符 - * / %取余 9%30 自增 --自减 关系运算符 < < > > 全等于 !不等于 逻辑运算符 & | !非 ^异或 &&短路与 || 短路或 赋值…

通用的排序按钮
排序按钮,使用Core Graphic绘制,可以指定颜色、大小、字体等: 使用场景如下: 1.使用方法 下载demo代码。将HYRankView.h和HYRankView.m代码拖入工程。 然后使用如下代码,即可快速添加一个名称为价格的排序按钮 HYR…

如何高效地爬取链家的房源信息(三)
“Python实现的链家网站的爬虫第三部分。”本系列文将以链家南京站为例,使用Python实现链家二手房源信息的爬虫,将数据爬取,并存入数据库中,以便使用。本系列第一部分为基础:如何高效地爬取链家的房源信息(…

Swift学习总结【持续更新】
1、 try、try?、try!的区别: try:需要用catch捕捉异常,如: do {let data try encoder.encode(item) try data.write(to: dataFilePath(), options: .atomic)} catch {print("Error encoding item array:\(error.localize…

svn清理失败且乱码 问题解决(转)
由于昨天在网络不好的状态下频繁尝试svn更新,导致今天svn更新时出现:清理失败且乱码的情况如下: 以下是解决方案:1.下载sqlite3.exe ,地址为:http://download.csdn.net/detail/whyzzj/63465292.在D盘建立文件夹 tools …

UI学习第二篇 (控件)
UIbutton 也是一个控件,它属于UIControl 用的最多的就是事件响应 1. //创建按钮对象 UIButton * _botton [UIButton buttonWithType:UIButtonTypeCustom]; //设置标题 [_botton setTitle:"按住说话" forstate:UIControlStateNormal]; [_botton setTitle:…

如何高效地爬取链家的房源信息(四)
“Python实现的链家网站的爬虫第四部分,最后一部分。”本系列文将以链家南京站为例,使用Python实现链家二手房源信息的爬虫,将数据爬取,并存入数据库中,以便使用。本系列第一部分为基础:如何高效地爬取链家…

Quartz2D在项目中的实际使用
还记得大学刚学iOS那会,从学校图书馆借了本iOS开发的书,有一章节介绍了Quartz2D,当时看得一头雾水,感觉这画画线,画画圆有什么用呢🤔️?工作一段时间后,遇到了一些需求,终…

区别:电感、磁珠和零欧电阻的作用
转载:http://www.cntronics.com/sensor-art/80022840 【导读】电感、磁珠和零欧电阻在电路中是常见的身影。对于这三者在电路中的作用及它们之间的区别,相信还有很多工程师不是很清楚。不过没关系,小编在此为大家奉上一篇关于电感、磁珠和零欧…

【转载】Linux下安装、配置、启动Apache
原文地址:http://www.cnblogs.com/zhuque/archive/2012/11/03/2763352.html 安装Apache前准备: 1、检查该环境中是否已经存在httpd服务的配置文件,默认存储路径:/etc/httpd/httpd.conf(这是centos预装的Apache的一个ent版本&#…

MIME格式解析
“ 本文介绍常见的MIME数据格式。”在协议还原中,不可避免地,经常会在各类协议内容中碰到MIME格式,例如标准邮件协议、HTTP协议。那么,什么是MIME呢?MIME是英文Multipurpose Internet Mail Extensions的缩写࿰…

AngularJs--过滤器(filter)
过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等。ng内置了一些过滤器…

【一步步学小程序】1.创建项目以及TabBar
1.创建项目 如图,创建项目,输入项目名称、选择目录,AppID是唯一标识,我们可以先点如图红框内的测试号,自动生成一个AppID,然后点新建即创建完一个新项目。 2.创建3个页面 确保如图左上角的编译器按钮是…

Yii在window下的安装方法
首先,在http://www.yiichina.com/上下载yii 然后,配置系统环境变量,在win8下,按winx,找到系统->高级系统设置->环境变量->path 把php的运行环境,加入到环境变量中,以分号隔开。如&…

从新手到入门,如何进入协议分析的世界
“ 协议分析与还原自学及入门指南。”有部分朋友给我发消息,说对协议还原很感兴趣,但苦于没人指导,希望得到我的帮助,问我如何进行协议分析的学习。这篇文章从初学者的角度,编列了一个学习指南,希望能对协议…