文档章节

React-Native入门指导之iOS篇

IT追寻者
 IT追寻者
发布于 2016/06/13 14:52
字数 1316
阅读 62
收藏 2

写在前面

1. 什么是React-Native?

  

  React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目。支持用开源的JavaScript库React.js来开发iOS和Android原生App。初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台。

  React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以<Image>替代<img>等。

 

2.React-Native有啥优缺点?

  优点是:能够用JavaScript脚本就可以写出App的界面,对从事Web开发的同事们转行做几个简单的移动App是个福利。不用为了写个移动App小程序而专门去学习Objective-C和Swift。

和其他的移动Web框架相比:

  • Native不用WebView,彻底摆脱了WebView让人不爽的交互和性能问题;
  • Native的原生控件有更好的体验;
  • Native有更好的手势识别;
  • Native有更适合的线程模型;

  缺点是:还在试用阶段,潜在的问题尚不得而知:兼容性问题,性能问题等。还没大量普及,学习资料尚且不多,供爱折腾的朋友尝尝鲜。

 

3.成功案例有哪些?

  那么,现在有哪些公司在用这个新出来的技术呢?据了解,有些国内走在技术前沿的公司已经开始在试用React.js开发项目了。

  天猫iPad客户端“猜你喜欢”业务,支付宝新一代的框架基于React;携程网App部分新业务;去哪儿网给航空公司用的收益辅助系统;百度图片搜索无线的新首页,部分试水;Quip 最好用的在线文档协作工具……

  

4.要学些什么?

  想必,大家已经按耐不住,会发问,使用React-Native开发要学习些什么呢?

  好了,废话不多,直入正题吧。

 

环境配置

1. 硬件条件

  你需要一台Mac电脑,或者是安装了OSX系统的电脑,这是iOS App开发的前提。

 

2. 软件条件

(1). 安装最新版的XCode,建议是XCode7.1及以上版本。(PS: 如果不是最新版,可能在之后新建项目的时候,会编译通不过。小编就是之前没把XCode升级到最新版,然后被一个编译问题困扰了很久。)

(2). 安装HomeBlew(OS系统上的一个安装包管理器,安装后可以方便后续安装包的安装。)

终端命令:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

(3). 安装Node.js (服务端的JavaScript运行环境)

npm install node

成功安装后,终端会有如下提示信息:

Node.js was installed at: /usr/local/bin/node 

npm was installed at: /usr/local/bin/npm 

Make sure that /usr/local/bin is in your $PATH.

(4). 建议安装WatchMan(React修改source文件的一个工具)

终端命令: 

brew install watchman

(5). 安装Flow: 一个JavaScript 的静态类型检查器。

终端命令:

brew install flow

(6). 安装React Native CLI: 用来开发React Native的命令行工具

终端命令:

npm install -g react-native

装好了环境,就可以愉快的玩耍起来了。

 

创建项目
1. 新建一个项目

  新建一个“HelloWorld”的项目,每个语言的开始教程都是这个,我们也不例外。

操作超级简单,只需终端输入命令行:

react-native init HelloWorld 

 

2. 运行项目

  创建的项目包含Andriod和iOS两个版本,我们这边就先介绍iOS的操作。(Andriod的操作也大同小异,无非就是编译的环境不同,js文件中的内容和写法都是通用的。学会了iOS的用法,再研究Andriod下的React-Native开发,会很轻松。)

  

  用XCode打开ios/HelloWorld.xcodeproj文件,点击键盘"⌘-R”或者点击"Run",编译运行项目。会启动React-Native服务和iOS模拟器。

  在iOS模拟器中可以看到如图界面:

  

  React-Native服务在编写过程中要一直开着,如图:

  

  如果不小心把它关了,没关系,可以在终端输入:

npm start

来重新开启服务。

 

如何调试

  安装谷歌的Chrome Developer Tools,具体使用方法,在之后的教程中会再具体介绍。

参考文章:https://facebook.github.io/react-native/docs/debugging.html

 

写在最后

  好了,看到这里,如果你已经成功配置了React-Native的环境,并且新建并成功运行了第一个程序了。那么,就先恭喜了,我们甚至没有写一行代码,就已经成功运行了第一个React-Native的程序,是不是还挺简单的。正所谓,良好的开端是成功的一半。

  在接下来的一篇文章中,我会和大家一起来具体看看自动新建项目中包括的内容,以及每个文件中具体写法和作用。

 

附上facebook官方的教程网站地址,供大家研究学习:https://facebook.github.io/react-native/docs/getting-started.html

本文转载自:http://www.cnblogs.com/jianglan/p/5027315.html

共有 人打赏支持
IT追寻者

IT追寻者

粉丝 29
博文 387
码字总数 57606
作品 0
海淀
高级程序员
私信 提问
Formik官方应用案例解析( 五)React Native

Hello React Native 在创建一个入门的Hello React Native工程时遇到一些麻烦,主要原因是Xcode版本太低。 使用create-react-native-app快速创建React Native框架 开发React相关项目,我使用的...

googlingman
2018/08/06
0
0
iOS原生混合RN开发最佳实践

做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid,有一些Hybrid的开发经验,目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 hybrid,在早期的时候,可能部分同学也接...

光强
2018/05/16
0
0
React Native SDK for OSS

此文主要介绍 React Native SDK for OSS的方方面面,包括相关基本概念、项目背景、项目方案、环境搭建运行、使用姿势、注意事项等。文末的附件可运行Example Zip压缩包和针对新手的入门实用文...

zuozhao
2018/05/18
0
0
React-Native学习资料分享

React Native 构建 Facebook F8 2016 App / React Native 开发指南 f8-app.liaohuqiu.net/ React-Native入门指南 github.com/vczero/reac… 30天学习React Native教程 github.com/fangwei71......

codeGoogle
2018/05/27
0
0
React Native 相关资源汇总

原文地址:https://github.com/jondot/awesome-react-native 文章 React Native: Bringing modern web techniques to mobile First impressions using React Native React Packager README.......

OSC编辑部
2015/07/21
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

关于360插件化Replugin Activity动态修改父类的字节码操作

近期在接入360插件化方案Replugin时,发现出现崩溃情况。 大概崩溃内容如下: aused by: java.lang.ClassNotFoundException: Didn't find class "x.x.x.xActivity" on path: 我自己在插件代码......

Gemini-Lin
今天
0
0
mybatis缓存的装饰器模式

一般在开发生产中,对于新需求的实现,我们一般会有两种方式来处理,一种是直接修改已有组件的代码,另一种是使用继承方式。第一种显然会破坏已有组件的稳定性。第二种,会导致大量子类的出现...

算法之名
昨天
17
0
单元测试

右键方法 Go To --> Test,简便快速生成测试方法。 相关注解 @RunWith(SpringRunner.class) 表示要在测试环境中跑,底层实现是 jUnit测试工具。 @SpringBootTest 表示启动整个 Spring工程 @A...

imbiao
昨天
4
0
欧拉公式

欧拉公式表达式 欧拉公式的几何意 cosθ + j sinθ 是个复数,实数部分也就是实部为 cosθ ,虚数部分也就是虚部为 j sinθ ,对应复平面单位圆上的一个点。 根据欧拉公式和这个点可以用 复指...

sharelocked
昨天
5
0
burpsuite无法抓取https数据包

1.将浏览器和burpsuite的代理都设置好 2.在浏览器地址栏输入: http://burp 3.下载下面的证书,并将证书导入浏览器 cacert.der

Frost729
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部