React-Native入门指导之iOS篇

React-Native 入门指导系列教程目录
二、项目介绍与调试
三、CSS样式与Flex布局
四、常用UI控件的使用
五、JSX在React-Native中的应用
六、事件与数据调用
七、自定义组件
八、动手写实例
九、发布与真机调试
 
写在前面
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运行环境)
成功安装后,终端会有如下提示信息:

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,具体使用方法,在之后的教程中会再具体介绍。
 
写在最后
  好了,看到这里,如果你已经成功配置了React-Native的环境,并且新建并成功运行了第一个程序了。那么,就先恭喜了,我们甚至没有写一行代码,就已经成功运行了第一个React-Native的程序,是不是还挺简单的。正所谓,良好的开端是成功的一半。
  在接下来的一篇文章中,我会和大家一起来具体看看自动新建项目中包括的内容,以及每个文件中具体写法和作用。
 
附上facebook官方的教程网站地址,供大家研究学习:https://facebook.github.io/react-native/docs/getting-started.html
 

React-Native入门的更多相关文章

  1. React Native入门教程 3 -- Flex布局

    上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...

  2. React Native入门教程2 -- 基本组件使用及样式

    在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...

  3. React Native入门教程 1 -- 开发环境搭建

    有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...

  4. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  5. React Native入门-刘望舒

    React Native入门(一)环境搭建与Hello World React Native入门(二)Atom+Nuclide安装.配置与调试 React Native入门(三)组件的Props(属性 ...

  6. React Native入门——布局实践:开发京东client首页(一)

    有了一些对React Native开发的简单了解,让我们从实战出发.一起来构建一个简单的京东client. 这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN ...

  7. react native 入门实践

    上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望 ...

  8. React Native 入门到原理(详解)

    抛砖引玉(帮你更好的去理解怎么产生的 能做什么) 砖一.动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲 ...

  9. React Native入门指南

    转载自:http://www.jianshu.com/p/b88944250b25 前言 React Native 诞生于 2015 年,名副其实的富二代,主要使命是为父出征,与 Apple 和 Go ...

  10. 《React Native入门与实战》读书笔记(1)

    ReactNative介绍 它的底层引擎是JavaScript Core,调用的是原生组件而非HTML5组件(HTML+CSS+JavaScript构建的组件).运行时,可以做到与Native App ...

随机推荐

  1. mysql相关日志汇总

    日志作为重要的查询问题的手段.所以尽量记录上自己须要的日志.以供自己查询一些问题. MySQL有下面几种日志: 错误日志: -log-err 查询日志: -log 慢查询日志: -log-slow-q ...

  2. JQuery是继prototype之后又一个优秀的Javascript库

    JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Oper ...

  3. Phalcon之 表单(Forms)

    Phalcon中提供了 Phalcon\Forms组件以方便开发人员创建和维护应用中的表单. 以下的样例中展示了主要的用法: <?php use Phalcon\Forms\Form, Phal ...

  4. 在IIS上发布Web(使用VS2005)

    最近想在IIS上发布网站,弄了一下午.遇到很多问题,幸运的是都一一解决了,现在把解决问题的过程分享出来: 安装好IIS后,在VS2005上写了个网站(新建-->网站-->ASP.NET网站 ...

  5. hdu3974(线段树+dfs)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=3974 题意:给定点的上下级关系,规定如果给i分配任务a,那么他的所有下属.都停下手上的工作,开始做a. ...

  6. 【淡墨Unity3D Shader计划】一间 创建一个游戏场景 &amp; 第一Shader写作

    本系列文章由@浅墨_毛星云 出品.转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/40723789 作者:毛星云(浅墨)  ...

  7. Thinkphp中的volist标签(查询数据集(select方法)的结果输出)用法简介

    参考网址:http://camnpr.com/archives/1515.html 通常volist标签多用于查询数据集(select方法)的结果输出,通常模型的select方法返回的结果是一个二维数 ...

  8. C语言sizeofkeyword

    说明: ******C语言sizeof是keyword.是一个操作符.它不是一个函数.用于计算可变.或内存数据字节数占用类型. ******sizeof有三种不同的方式: ***sizeof(变量名) ...

  9. 整理QTP知识之1

    以下说明由网络其他文章整合而成. 一.关于QTP的说明 QTP是目前市场上占有率最高的一款自动化测试工具,也是每一位测试工作者最想掌握的工具之一,也是目前流行的基于GUI的功能自动化测试工具之一. Q ...

  10. hdu2818行列匹配+排序

    题意:给定一个矩阵,矩阵上有的数字是1,有的是0,给定两种操作,交换某两行或者某两列,问是否能置换出对角线为1的矩阵 题解:能够置换出对角线是1的矩形要求有n个1既不在同一行也不再同一列,即行列匹配, ...