React Native 教程

ReactNative 可以基于目前大热的开源JavaScriptReact.js来开发iOSAndroid原生App(app开发公司ty300.com)。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。

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

在幕后,React Native在主线程之外,在另一个背景线程里运行JavaScript引擎,两个线程之间通过一批量化的async消息协议来通信(有一个专门的React插件)。

UI方面React Native提供跨平台的类似Flexbox的布局系统,还支持CSS子集。可以用JSX或者普通JavaScript语言,还有CoffeeScript和TypeScript来开发。有评论说,React的UI层模型要比UIKit好很多。

更好的是,由于基于Web技术,开发起来可以像在浏览器里那样随时在仿真程序中查看应用运行情况,刷新一下就行,无需编译,爽吧。

React Native比起标准Web开发或原生开发能够带来的三大好处:

手势识别:基于Web技术(HTML5/JavaScript)构建的移动应用经常被抱怨缺乏及时响应。而基于原生UI的React Native能避免这些问题从而实现实时响应。
原生组件:使用HTML5/JavaScript实现的组件比起原生组件总是让人感觉差一截,而React Native由于采用了原生UI组件自然没有此问题。
样式和布局:iOS、Android和基于Web的应用各自有不同的样式和布局机制。React Native通过一个基于FlexBox的布局引擎在所有移动平台上实现了一致的跨平台样式和布局方案。

时间: 2024-10-06 23:32:53

React Native 教程的相关文章

React Native教程 - 调用Web API

react-native官网Fetch介绍:https://facebook.github.io/react-native/docs/network.html#content react-native中不支持$,也就是说我们无法使用$HTTP来调用API,根据react-native官网教程,我们可以使用fetch,这也是一个更好的网络API,它在react native中默认可以使用. 在react-native项目中,我们还是使用我们的惯用方法,写一个服务js来放我们的所有API,但是在re

【REACT NATIVE 系列教程之五】NAVIGATOR(页面导航)的基本使用与传参

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2248.html 今天介绍一种应用开发中常用的负责页面切换及导航功能的组件:Navigator 一:Navigator 对于页面导航其实主要功能就是:每个页面都知道本身应该切换到哪个页面,并且切到的页面会记录从哪里来,如果要返回的话,知道返回到哪个页面.这一切都不需要再用逻辑管理!而且每个页面之间也可以进行参数传递,

【REACT NATIVE 系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2203.html 本文是RN(React Native)系列教程第一篇,当然也要给自己的群做个广告:   React Native @Himi :126100395  刚创建的群,欢迎一起学习.讨论.进步. 本文主要讲解两点: 1.   PanResponder:触摸事件,用以获取用户手指所在屏幕的坐标(x,y)或触

【REACT NATIVE 系列教程之八】不使用NAVIGATOR实现切换(页面)场景的两种形式(逻辑与MODAL)

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2285.html 在第五篇中介绍了使用导航Navigator进行(页面)场景的切换,但是对于一些需求其实是无法满足,或者说太浪费.例如: 1. 只是想做一个很简单的页面切换,并不需要记录从哪来-也不需要手势滑屏返回等,这时使用导航Navigator太浪费了. 2. 假设: a) 有个View 包括一个Navigato

【REACT NATIVE 系列教程之六】重写SHOULDCOMPONENTUPDATE指定组件是否进行重绘

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2252.html 前几天,Himi 写练手项目时,遇到子更新父state中的某一个属性值,且对父进行重绘时,父包含的所有子组件都进行重绘 – -- 非常尴尬. 查阅了RN文档,终于在生命周期篇看到了想要的答案. 仔细看过RN关于生命周期篇的童鞋应该知道,就是它:shouldComponentUpdate 官方解释此函

【REACT NATIVE 系列教程之七】统一ANDROID与IOS两个平台的程序入口&&区分平台的组件简介

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2260.html       本篇介绍两个细节:       1. 关于如何将index.android.js 与index.ios.js统一管理起来.       2.  Platform 组件的简单介绍与使用   一:将index.android.js 与index.ios.js统一管理起来. 由于React本身

React Native的极简手册

安装入门可以参考:React Native官方文档(http://reactnative.cn/docs/0.31/tutorial.html#content). NodeJS知识储备:参考<NodeJS入门>(https://leanpub.com/nodebeginner-chinese).(尊重知识,请购买原版). 书籍:<React Native入门与实战> 代码示例:30天学习React Native教程(https://github.com/fangwei716/30-

超详细Windows版本编译运行React Native官方实例UIExplorer项目(多图慎入)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50661981 本文出自:[江清清的博客] (一)前言 特别说明:群里很多童鞋都在说想Windows系统官方实例,但是官方提供的文档以及网上的例子都是OS X版本.今天特意给大家更新一下Windows版本运行官方 实例(UIExporler)全过程.俗话说学习一样新东西的时候,例如这边我们要学React Native的组件使用,那么最好的学习资料就是官方提供的材料了,

深入浅出React Native 2: 我的第一个应用

这是深入浅出React Native教程的第二篇文章,第一篇为环境配置. React Native环境配好之后,就可以开始创建我们的第一个App啦. 打开控制台,输入 react-native init AwesomeProject 上述命令的作用是在当前文件夹下创建一个名字叫AwesomeProject的项目模板.在运行该命令之前,可以先用cd命令到自己想创建react native的文件夹下. 当然,比较坑的是,执行这个命令会用耗费很长很长的时间,有时候还会出现各种各样的错误,例如,没有权限