react native ui,为什么应该开始使用 React Native 了
react native ui,为什么应该开始使用 React Native 了详细介绍
本文目录一览： ReactNative的优缺点是什么
React Native是一个用于构建用户界面的JavaScript库，它主要由JavaScript和JSX语言编写。是针对于构建移动应用程序开发的框架React NativeReact Native应用程序使用JavaScript和XML-esque标记（称为JSX）的混合编写。 此应用程序将使用真实的移动UI组件呈现，而不是webview，并且外观和感觉与任何其他移动应用程序一样。React Native还公开了用于平台API的JavaScript接口，因此React Native应用程序具有访问平台的功能，如手机摄像头或用户的位置。React Native的优点（1）React Native可将标记元素转化为真实的原生UI元素，利用在任何平台上所呈现视图的现有方法（2）React Native与主UI线程分开工作，所以应用程序可以在不牺牲功能的前提下保持最大的性能（3）React Native创建的应用程序允许开发人员创建和构建跨平台应用程序，这些应用程序是客户端的完全本机应用程序，因为它使用基于iOS或Android组件构建的JavaScript组件。节省了跨平台应用程序开发时间，并且应用程序维护更便宜（4）在组件开发方面，Native移动应用程序使用大量代码和类来在UI中进行渲染，但是React Native只使用组件名称并声明其属性，它将在UI中呈现这两个平台都为移动应用开发节省了时间。React Native的缺点：（1）与其他Android和iOS编程语言相比，React Native还不成熟。它仍处于改进阶段，这可能会对应用程序产生负面影响，尤其是每次发布新更新时，开发人员都必须进行大量更改并定期进行升级。应用程序在升级过程中也会遇到了很多问题。（2）除了仅编写代码之外，开发人员有时还需要为与React Native不兼容的组件编写额外的本机代码，有时候与本机组件相比，React Native组件变得更差（3）它缺乏安全稳健性，React Native是一个JavaScript库和开源框架，它在安全性方面存在重大问题（4）React Native在最初渲染之前需要花费大量时间来初始化运行，因为JavaScript线程需要时间来初始化总结：React Native是一个很有用的框架，使开发人员能够使用他们现有的JavaScript知识创建强大的移动应用程序。它提供更快的移动开发，以及跨平台性和高效的代码共享，而且还不会牺牲用户的体验或应用程序质量，但由于它才刚发展还存在许多不足之处，相信以后它会越来越完善
React Native 速成 002 — 使用 UI框架 React Native Elements
React Native Elements 是一款 React Native 的UI框架，风格配色均属上乘，框架封装了很多常用组件，用来搭建产品原型非常方便。
它的官方网站是 https://react-native-training.github.io/react-native-elements/
通过上一节的 CRNA 创建的 app，自带了react-native-vector-icons ，所以可以非常方便的安装它react-native-elements。
我们首先直接在 App.js 中试试它的组件吧。
我们先来尝试基础组件，其中有Button，Badge，Social Icon，Icon等，可以在 这里 查看它们的使用文档。
基础组件的使用比较简单，直接 import from 'react-native-elements' 后调用即可，这里不再详细叙述。我们主要看看一些常用的复杂组件。smart和dumb组件的划分可以看之前的文章。
首先我们来看 Card 卡片组件，通常用来显示一个或者系列项目。
这里我们在项目文件夹下添加 images 子文件夹，然后使用
image={require('./images/card.jpg')}> 添加文件。
同时，也可以指定image的uri来添加图片
image={{uri:'http://image.tianjimedia.com/uploadImages/2011/253/437L1Y9HRN2U.jpg'}}>
效果如下：
倘若多个 Card 一个 View 里面放不下怎么办？
那我们将要使用 ScrollView。
ScrollView
是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动，还能水平滚动（通过horizontal
属性来设置）。
这里我们引入它 import { ScrollView } from 'react-native';
然后将原先的 View 替换成 ScrollView 即可。
ScrollView适合用来显示数量不多的滚动元素。放置在ScollView
中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的ListView组件。之后我们也会学习 如何使用ListView 。
React Native之原理浅析
原文链接
UI的描述和呈现分离开了
Javascript在react native里面非常重要
React Native它可不一样
React Native组件结构
在一定程度上，React Native和NodeJS有异曲同工之妙。它们都是通过扩展JavaScript Engine, 使它具备强大的本地资源和原生接口调用能力，然后结合JavaScript丰富的库和社区和及其稳定的跨平台能力，把javascript的魔力在浏览器之外的地方充分发挥出来
JavaScriptCore + ReactJS + Bridges 就成了React Native
RCTRootView做的事情如下
React Native的初始化分为几个步骤
这里需要提一下的是
JS Engine不直接管理UI的绘制
|
|
内部机制
JS用时序
Java层核心类及原理，如下所示
ReactContext
ReactInstanceManager
ReactRootView
CatalystInstance
JavaScriptModule
NativeModule
JavascriptModuleRegistry
NativeModuleRegistry
CoreModulePackage
Java 调用Js
Js 调用Java
react native 相比其他的优势在哪儿
html5现在还占优势的。
1、开发方式
（1）代码结构： React Native更为合理，组件化程度高
（2）UI布局：Web布局灵活度 > React Native > Native
（3）UI截面图：React Native使用的是原生组件，
（4）路由／Navigation：React Native & Native更胜一筹
（5）第三方生态链：Native modules + js modules = React Native modules
2、性能 & 体验
（1）内存：Native最少；因为React Native含有框架，所以相对较高，但是后期平稳后会优于Native。
（2）CPU：React Native居中。
（3）动画：React Native动画需求基本满足。
（4）安装包体积：React Native框架打包后，811KB。相比热更新，可以忽略和考虑资源规划。
（5）Big ListView
（6）真机体验：Native >= React Native > H5/Hybrid
前端中的RN是什么
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。
RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。
RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
JavaScript应用代码和原生平台之间所有的操作都采用异步执行模式，原生模块使用额外线程，开发者可以解码主线程图像、后台保存至磁盘、无须顾忌UI等诸多因素直接度量文本设计布局。
React Native 轻松集成聊天组件
今天要介绍的是 Aurora IMUI 库，支持 Android，iOS 和 React Native。本文主要指导 React Native Android 如何集成和使用这个库，先来看看效果图。
这样就完成了安装步骤。
IMUI 提供了 MessageList 组件和 ChatInput 组件。 MessageList 是聊天列表， ChatInput 是聊天输入框组件。在 render 方法中引入：
注意到 MessageList 和 ChatInput 都有提供了很多属性和属性方法。如果不使用自定义属性，那么将会使用默认的样式。属性方法是一些事件的回调，你可以在回调中创建消息等等。
插入，更新，增加消息到 MessageList , 你需要使用 AuroraIMUIModule (Native Module) 来发送事件到 Native。
example:
example:
example:
在 Android 中，如果你想要自定义消息气泡，你需要将一张点九图放在 drawable 文件夹下。 点九图介绍 ，sample 项目下的 drawable-xhdpi 文件夹中有示范
padding 对象包括四个属性: left, top, right, bottom. eg: {left: 5, top: 5, right: 15, bottom: 5}
[使用案例参考]( https://github.com/jpush/aurora-imui/tree/master/ReactNative/sample
react native是什么技术
React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。
React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。
英语学习有困难可以浏览智课网哦
为什么应该开始使用 React Native 了
数月前，Facebook 对外宣布了正在开发的 React Native 框架，这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天，Beta 版的仓库释出了！基于 PhoneGap 使用 JavaScript 和 HTML5 开发 iOS 应用已经有好几年了，那 React Native 有什么牛的？
React Native 真的很牛，让大家兴奋异常的主要原因有两点：
可以基于 React Native使用 JavaScript 编写应用逻辑，UI 则可以保持全是原生的。这样的话就没有必要就 HTML5 的 UI 做出常见的妥协；
React 引入了一种与众不同的、略显激进但具备高可用性的方案来构建用户界面。长话短说，应用的 UI 简单通过一个基于应用目前状态的函数来表达。
React Native 的关键就是，以把 React 编程模式的能力带到移动开发来作为主要目标。它的目标不是跨平台一次编写到处执行，而是一次学习跨平台开发。这个是一个非常大的区别。这篇教程只介绍 iOS 平台，不过你一旦掌握了相关的概念，就可以应用到 Android 平台，快速构建 Android 应用。
如果之前只用过 Objective-C 或者 Swift 写应用的话，你很可能不会对使用 JavaScript 来编写应用的愿景感到兴奋。尽管如此，作为一个 Swift 开发者来说，上面提到的第二点应该可以激起你的兴趣！
你通过 Swift，毫无疑问学习到了新的更多有效的编码方法和技巧，鼓励转换和不变性。然而，构建 UI 的方式还是和使用 Objective-C 的方式一致。仍然以 UIKit 为基础，独断专横。
通过像 virtual DOM 和 reconciliation 这些有趣的概念，React 将函数式编程直接带到了 UI 层。
ReactNative组件的生命周期多长
这次给大家带来React Native组件的生命周期多长，React Native组件生命周期的注意事项有哪些，下面就是实战案例，一起来看一下。这里有一篇React Native组件生命周期简介为大家带来，相信这对于大家在React Native组件时候会有很大的帮助，感兴趣的下面一起来看看。 就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下 如图，可以把组件生命周期大致分为三个阶段： 第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化； 第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。 生命周期回调函数 下面来详细介绍生命周期中的各回调函数。 getDefaultProps 在组件创建之前，会先调用 getDefaultProps()，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 getInitialState()，来初始化组件的状态。 componentWillMount 然后，准备加载组件，会调用 componentWillMount()，其原型如下：void componentWillMount() 这个函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制 render() 之前。可以在这里做一些业务初始化操作，也可以设置组件状态。这个函数在整个生命周期中只被调用一次。 componentDidMount 在组件第一次绘制之后，会调用 componentDidMount()，通知组件已经加载完成。函数原型如下：void componentDidMount() 这个函数调用的时候，其虚拟 DOM 已经构建完成，你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是，RN 框架是先调用子组件的 componentDidMount()，然后调用父组件的函数。从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求。这个函数也是只被调用一次。这个函数之后，就进入了稳定运行状态，等待事件触发。 componentWillReceiveProps 如果组件收到新的属性（props），就会调用 componentWillReceiveProps()，其原型如下：void componentWillReceiveProps( object nextProps) 输入参数 nextProps 是即将被设置的属性，旧的属性还是可以通过 this.props 来获取。在这个回调函数里面，你可以根据属性的变化，通过调用 this.setState() 来更新你的组件状态，这里调用更新状态是安全的，并不会触发额外的 render() 调用。如下：componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount });} shouldComponentUpdate 当组件接收到新的属性和状态改变的话，都会触发调用 shouldComponentUpdate(...)，函数原型如下：boolean shouldComponentUpdate( object nextProps, object nextState) 输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样，nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。 默认情况下，这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。 componentWillUpdate 如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准更新组件，并调用 componentWillUpdate()，其函数原型如下：void componentWillUpdate( object nextProps, object nextState) 输入参数与 shouldComponentUpdate 一样，在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，你就不能使用 this.setState 来修改状态。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props和 this.state 中。紧接着这个函数，就会调用 render() 来更新界面了。 componentDidUpdate 调用了 render() 更新完成界面之后，会调用 componentDidUpdate() 来得到通知，其函数原型如下：void componentDidUpdate( object prevProps, object prevState) 因为到这里已经完成了属性和状态的更新了，此函数的输入参数变成了 prevProps 和 prevState。 componentWillUnmount 当组件要被从界面上移除的时候，就会调用 componentWillUnmount()，其函数原型如下：void componentWillUnmount() 在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。 总结 到这里，RN 的组件的完整的生命都介绍完了，在回头来看一下前面的图，就比较清晰了，把生命周期的回调函数总结成如下表格： 生命周期 调用次数 能否使用 setSate() getDefaultProps 1(全局调用一次) 否 getInitialState 1 否 componentWillMount 1 是 render >=1 否 componentDidMount 1 是 componentWillReceiveProps >=0 是 shouldComponentUpdate >=0 否 componentWillUpdate >=0 否 componentDidUpdate >=0 否 componentWillUnmount 1 否 相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：
如何用 React Native 创建一个iOS APP
React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发
iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。
React Native 使你能够使用基于 JavaScript 和 React
一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native
把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook
在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。
其好处显而易见：减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差，开发新功能可以更迅速。
下面，我们可以尝试用React Native创建一个 iOS APP.
在我们开始之前，我建议：你可以在 Github
里先下载 React Native 的代码框架。里面还有一些示例项目，2048 的游戏， Movies（一个看电影的
APP）,SampleApp, TicTacToe (一款游戏)和 UIExplorer（能显示出所有用 React Native
替代的控件，如ListView，TabBar，MapView, Slider）），对于学习用如何用 React Native 创建
UI,这些都是非常好的例子,尤其是 UIExplorer APP，它几乎用到了每一个您的 APP 中需要创建的 UI 控件。
首先，我们先来安装相应的工具。React native 是使用 Node.js 来 创建 JavaScript 代码。如果你已经在你电脑上安装上了这些工具，你可以跳过下面这几步。
推荐使用 Homebrew的方式来安装 nvm，watchman 和 flow。
在Mac下，如果用homebrew，那么只用一行就可以装好:
brew install node
接下来安装watchman
brew install watchman
watchman是Facebook的一个文件观察者。React Native 用它来检测代码的变化.
接下来安装 npm
npm install -g react-native-cli
nmp 是 node的一个三方管理工具，相当于 Ruby中的RubyGems，iOS中的 CocoaPods，Java中的 Gradle/Maven，基本上，它使您能够轻松下载和管理你的项目需要的任何依赖库。
在终端，找到你希望保存的项目文件，然后运行下面的文件夹。
react-native init BookSearch
以上使用 CLI 工具来构建一个 Native 项目，是准备建立并运行原样。当这个过程完成后，你就会在终端窗口中打开 Xcode
的BookSearch.xcodeproj
并运行应用程序像往常一样。做到这一点，模拟器将启动您的应用程序的运行。一个终端窗口也将打开。当一个Native应用程序启动时，它加载从以下网址
JavaScript 的应用程序。
http://localhost:8081/index.ios.bundle
?
终端被打开，服务器开始作出反应来处理上述请求。该 Native 负责读取和建设 JSX（我们将看看这个版本）和 JavaScript 代码。
运行这个 APP,你可以看到下图中的模拟器，如果你想在开发运行有几个步骤，你应该这样做。
欢迎屏幕给出了一些关键的指令，你应该注意：编辑应用程序的用户界面，你应该修改，当你创建项目时生成的 index.ios.js 文件，如果您更改
JavaScript 代码，重新加载命令应用程序 Command-R 看到的变化，如果你想要更多的选择，使用命令控制
Command-Control-Z 打开开发者菜单，提供了这样的选项，使现场重新加载和浏览器的调试。
在任何时候做本教程时你可能会遇到一个红色屏幕模拟器，可以检查错误消息。它能让你知道这个问题是与你的代码还是服务器有关系。当我接收到错误的消
息「无法连接到服务器」 在模拟器和检查终端有一个「流程终止」 错误消息时我陷入了服务器连接问题。当这种情况发生时，关闭终端窗口，停止在
Xcode
中的应用并再次运行它。对于其他错误，是由于语法错误代码中或网络请求超时时（如果你的应用从互联网上获取数据），一个简单的重新加载后修复这个问题应该
怎么做。
如果你在敦促 Command-R 键盘但什么都没有发生，硬件键盘可能没有连接到模拟器上。选择模拟器上的选项菜单以连接它：Hardware > Keyboard > Connect Hardware Keyboard.
如果你按上边程序做了它依然不能重新加载，那么你可能需要重启你的电脑。我遇到过一次突然死机，重启电脑可以完成加载。
我们现在开始构建应用程序，打开 index.ios.js 文件。我建议使用适合 web 开发的 IDE。你还可以使用
Xcode，但你会发现它并不适合因为在代码格式化、自动完成和语法错误突出显示时它不是非常灵活。你可以通过学习本文来决定并选择合适的
JavaScript IDE。我用过 RudbyMine，但实际上任何 IDE 都支持 JavaScript。如果你能得到一个支持 JSX
的那真很不错。
当你打开 indx.ios.js 文件，你就会看到正在运行的应用程序构建 UI 的代码。你可能看到以下代码块。
'use strict'
以上代码启用了严格的模式，增加了处理原生 JavaScript 代码对错误的改善。
var React = require('react-native');
以上代码可以加载 react-native 模块，并将它赋予变量的反应。在你调用任何模块之前你需要把外部模块加载到你的文件中来。可以把它作为Swift 和 Objective-C 的导入库。
var { AppRegistry, StyleSheet, Text,
View,
} = React;
上面是一个解构赋值，你可以通过它将多个对象属性分配给一个变量。这能让他们在文件作用域被引用。以上是可选择的，但如果你不用它，那么每次你使用
一个组件在你代码中时，你就必须使用完全限定的名称，例如：「React.AppRegistry」而不能只用「AppRegistry」
、「React.StyleSheet」 而不能用「StyleSheet」 等等。
var BookSearch = React.createClass({
render: function() {
return (
Welcome to React Native!
To get started, edit index.ios.js
Press Cmd+R to reload,{'\n'}
Cmd+Control+Z for dev menu
);
}
});
上面创建一个类只有一个渲染 () 函数。在渲染函数中无论什么被定义都是将输出到屏幕上。上述使用
JSX（JavaScript语法扩展）来构建应用程序的 UI。如果您以前使用过 XML（甚至HTML），JSX
就会记住并熟悉你。它具有相同的均衡功能来打开和关闭标签并使用属性来设置值标签。你不需要使用 JSX 本地反应，你可以使用纯
JavaScript，但 JSX 建议它的简单定义树结构。如果你有很多 UI 的代码，通过大型的 JSX 树结构将更容易阅读理解。
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS（层叠样式表），在此之前这应该是熟悉的。React Native 使用
CSS 样式应用程序的UI。如果你看看 JSX 代码，你会看到不同风格的代码被用在不同的地方。例如:
style={style.container}设置样式定义容器的外部视图包含其他UI组件。
上面的样式应用可于视图的内容。如果做过 web 开发或用过 CSS（层叠样式表），在此之前这应该是熟悉的。React Native 使用
CSS 样式应用程序的 UI。如果你看看 JSX 代码，你会看到不同风格的代码被用在不同的地方。例如:
style={style.container}设置样式定义容器的外部视图包含其他 UI 组件。
诚然，React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发
iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。
React Native 使你能够使用基于 JavaScript 和 React
一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native
把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook
在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。
其好处显而易见：减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差，开发新功能可以更迅速。
下面，我们可以尝试用React Native创建一个 iOS APP.
在我们开始之前，我建议：你可以在 Github
里先下载 React Native 的代码框架。里面还有一些示例项目，2048 的游戏， Movies（一个看电影的
APP）,SampleApp, TicTacToe (一款游戏)和 UIExplorer（能显示出所有用 React Native
替代的控件，如ListView，TabBar，MapView, Slider）），对于学习用如何用 React Native 创建
UI,这些都是非常好的例子,尤其是 UIExplorer APP，它几乎用到了每一个您的 APP 中需要创建的 UI 控件。
首先，我们先来安装相应的工具。React native 是使用 Node.js 来 创建 JavaScript 代码。如果你已经在你电脑上安装上了这些工具，你可以跳过下面这几步。
推荐使用 Homebrew的方式来安装 nvm，watchman 和 flow。
在Mac下，如果用homebrew，那么只用一行就可以装好:
brew install node
接下来安装watchman
brew install watchman
watchman是Facebook的一个文件观察者。React Native 用它来检测代码的变化.
接下来安装 npm
npm install -g react-native-cli
nmp 是 node的一个三方管理工具，相当于 Ruby中的RubyGems，iOS中的 CocoaPods，Java中的 Gradle/Maven，基本上，它使您能够轻松下载和管理你的项目需要的任何依赖库。
在终端，找到你希望保存的项目文件，然后运行下面的文件夹。
react-native init BookSearch
以上使用 CLI 工具来构建一个 Native 项目，是准备建立并运行原样。当这个过程完成后，你就会在终端窗口中打开 Xcode
的BookSearch.xcodeproj
并运行应用程序像往常一样。做到这一点，模拟器将启动您的应用程序的运行。一个终端窗口也将打开。当一个Native应用程序启动时，它加载从以下网址
JavaScript 的应用程序。
http://localhost:8081/index.ios.bundle
?
终端被打开，服务器开始作出反应来处理上述请求。该 Native 负责读取和建设 JSX（我们将看看这个版本）和 JavaScript 代码。
运行这个 APP,你可以看到下图中的模拟器，如果你想在开发运行有几个步骤，你应该这样做。
欢迎屏幕给出了一些关键的指令，你应该注意：编辑应用程序的用户界面，你应该修改，当你创建项目时生成的 index.ios.js 文件，如果您更改
JavaScript 代码，重新加载命令应用程序 Command-R 看到的变化，如果你想要更多的选择，使用命令控制
Command-Control-Z 打开开发者菜单，提供了这样的选项，使现场重新加载和浏览器的调试。
在任何时候做本教程时你可能会遇到一个红色屏幕模拟器，可以检查错误消息。它能让你知道这个问题是与你的代码还是服务器有关系。当我接收到错误的消
息「无法连接到服务器」 在模拟器和检查终端有一个「流程终止」 错误消息时我陷入了服务器连接问题。当这种情况发生时，关闭终端窗口，停止在
Xcode
中的应用并再次运行它。对于其他错误，是由于语法错误代码中或网络请求超时时（如果你的应用从互联网上获取数据），一个简单的重新加载后修复这个问题应该
怎么做。
如果你在敦促 Command-R 键盘但什么都没有发生，硬件键盘可能没有连接到模拟器上。选择模拟器上的选项菜单以连接它：Hardware > Keyboard > Connect Hardware Keyboard.
如果你按上边程序做了它依然不能重新加载，那么你可能需要重启你的电脑。我遇到过一次突然死机，重启电脑可以完成加载。
我们现在开始构建应用程序，打开 index.ios.js 文件。我建议使用适合 web 开发的 IDE。你还可以使用
Xcode，但你会发现它并不适合因为在代码格式化、自动完成和语法错误突出显示时它不是非常灵活。你可以通过学习本文来决定并选择合适的
JavaScript IDE。我用过 RudbyMine，但实际上任何 IDE 都支持 JavaScript。如果你能得到一个支持 JSX
的那真很不错。
当你打开 indx.ios.js 文件，你就会看到正在运行的应用程序构建 UI 的代码。你可能看到以下代码块。
'use strict'
以上代码启用了严格的模式，增加了处理原生 JavaScript 代码对错误的改善。
var React = require('react-native');
以上代码可以加载 react-native 模块，并将它赋予变量的反应。在你调用任何模块之前你需要把外部模块加载到你的文件中来。可以把它作为Swift 和 Objective-C 的导入库。
var { AppRegistry, StyleSheet, Text,
View,
} = React;
上面是一个解构赋值，你可以通过它将多个对象属性分配给一个变量。这能让他们在文件作用域被引用。以上是可选择的，但如果你不用它，那么每次你使用
一个组件在你代码中时，你就必须使用完全限定的名称，例如：「React.AppRegistry」而不能只用「AppRegistry」
、「React.StyleSheet」 而不能用「StyleSheet」 等等。
var BookSearch = React.createClass({
render: function() {
return (
Welcome to React Native!
To get started, edit index.ios.js
Press Cmd+R to reload,{'\n'}
Cmd+Control+Z for dev menu
);
}
});
上面创建一个类只有一个渲染 () 函数。在渲染函数中无论什么被定义都是将输出到屏幕上。上述使用
JSX（JavaScript语法扩展）来构建应用程序的 UI。如果您以前使用过 XML（甚至HTML），JSX
就会记住并熟悉你。它具有相同的均衡功能来打开和关闭标签并使用属性来设置值标签。你不需要使用 JSX 本地反应，你可以使用纯
JavaScript，但 JSX 建议它的简单定义树结构。如果你有很多 UI 的代码，通过大型的 JSX 树结构将更容易阅读理解。
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS（层叠样式表），在此之前这应该是熟悉的。React Native 使用
CSS 样式应用程序的UI。如果你看看 JSX 代码，你会看到不同风格的代码被用在不同的地方。例如:
style={style.container}设置样式定义容器的外部视图包含其他UI组件。
上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS（层叠样式表），在此之前这应该是熟悉的。React Native 使用
CSS 样式应用程序的 UI。如果你看看 JSX 代码，你会看到不同风格的代码被用在不同的地方。例如:
style={style.container}设置样式定义容器的外部视图包含其他 UI 组件。
1、下载安装并打开itunes。
2、让手机进入恢复模式：
一、先长按住电源键，出现关机选项时，请滑动关机；
二、随后再按电源键开机，屏幕会出现苹果标志，不要松开电源键；
三、接着再按住主屏 Home 键，直到屏幕黑屏；
四、当屏幕黑屏时，请松开电源键，继续按住主屏 Home 键不要松开，直到电脑端的iTunes 出现“检测到一个处于恢复模式的 iPhone”；
步骤方法：可以用React Native创建一个 iOS APP.
在开始之前，建议：在 Github里先下载 React Native 的代码框架。里面还有一些示例项目，2048 的游戏， Movies（一个看电影的 APP）,SampleApp, TicTacToe (一款游戏)和 UIExplorer（能显示出所有用 React Native 替代的控件，如ListView，TabBar，MapView, Slider）），对于学习用如何用 React Native 创建 UI,这些都是非常好的例子,尤其是 UIExplorer APP，它几乎用到了每一个您的 APP 中需要创建的 UI 控件。
首先，先来安装相应的工具。React native 是使用 Node.js来 创建 Java 代码。如果已经在电脑上安装上了这些工具，可以跳过下面这几步。
推荐使用 Homebrew的方式来安装 nvm，watchman 和 flow。
在Mac下，如果用homebrew，那么只用一行就可以装好:
brew install node
接下来安装watchman
brew install watchman
watchman是Facebook的一个文件观察者。React Native 用它来检测代码的变化.
接下来安装 npm
npm install -g react-native-cli
nmp 是 node的一个三方管理工具，相当于 Ruby中的RubyGems，iOS中的 CocoaPods，Java中的 Gradle/Maven，基本上，它使您能够轻松下载和管理你的项目需要的任何依赖库。
在终端，找到希望保存的项目文件，然后运行下面的文件夹。
react-native init BookSearch
以上使用 CLI 工具来构建一个 Native 项目，是准备建立并运行原样。当这个过程完成后，就会在终端窗口中打开 Xcode 的BookSearch.xcodeproj 并运行应用程序像往常一样。做到这一点，模拟器将启动您的应用程序的运行。一个终端窗口也将打开。当一个Native应用程序启动时，它加载从以下网址 Java 的应用程序。
终端被打开，服务器开始作出反应来处理上述请求。该 Native 负责读取和建设 JSX（将看看这个版本）和 Java 代码。
运行这个 APP,你可以看到模拟器，如果想在开发运行有几个步骤，应该这样做。
欢迎屏幕给出了一些关键的指令，应该注意：编辑应用程序的用户界面，应该修改，当你创建项目时生成的 index.ios.js 文件，如果更改 Java 代码，重新加载命令应用程序 Command-R 看到的变化，如果想要更多的选择，使用命令控制 Command-Control-Z 打开开发者菜单，提供了这样的选项，使现场重新加载和浏览器的调试。
在任何时候做本教程时可能会遇到一个红色屏幕模拟器，可以检查错误消息。能知道这个问题是与代码还是服务器有关系。当接收到错误的消息「无法连接到服务器」 在模拟器和检查终端有一个「流程终止」 错误消息时我陷入了服务器连接问题。当这种情况发生时，关闭终端窗口，停止在 Xcode 中的应用并再次运行它。对于其他错误，是由于语法错误代码中或网络请求超时时（如果应用从互联网上获取数据），一个简单的重新加载后修复这个问题应该怎么做。
如果在敦促 Command-R 键盘但什么都没有发生，硬件键盘可能没有连接到模拟器上。选择模拟器上的选项菜单以连接它：Hardware > Keyboard > Connect Hardware Keyboard.
如果按上边程序做了它依然不能重新加载，那么可能需要重启你的电脑。我遇到过一次突然死机，重启电脑可以完成加载。
现在开始构建应用程序，打开 index.ios.js 文件。我建议使用适合 web 开发的 IDE。还可以使用 Xcode，但会发现它并不适合因为在代码格式化、自动完成和语法错误突出显示时它不是非常灵活。可以通过学习本文来决定并选择合适的 Java IDE。如用 RudbyMine，但实际上任何 IDE 都支持 Java。如果能得到一个支持 JSX 的那真很不错。
当打开 indx.ios.js 文件，就会看到正在运行的应用程序构建 UI 的代码。可能看到以下代码块。
'use strict'
以上代码启用了严格的模式，增加了处理原生 Java 代码对错误的改善。
var React = require('react-native');
以上代码可以加载 react-native 模块，并将它赋予变量的反应。在调用任何模块之前需要把外部模块加载到你的文件中来。可以把它作为Swift 和 Objective-C 的导入库。
var { AppRegistry, StyleSheet, Text, View, } = React;
上面是一个解构赋值，可以通过它将多个对象属性分配给一个变量。这能让他们在文件作用域被引用。以上是可选择的，但如果不用它，那么每次你使用一个组件在你代码中时，就必须使用完全限定的名称，例如：「React.AppRegistry」而不能只用「AppRegistry」 、「React.StyleSheet」 而不能用「StyleSheet」 等等。
var BookSearch = React.createClass({ render: function() { return (
Welcome to React Native!
To get started, edit index.ios.js
Press Cmd+R to reload,{'\n'} Cmd+Control+Z for dev menu ); } });
上面创建一个类只有一个渲染 () 函数。在渲染函数中无论什么被定义都是将输出到屏幕上。上述使用 JSX（Java语法扩展）来构建应用程序的 UI。如果以前使用过 XML（甚至HTML），JSX 就会记住并熟悉。它具有相同的均衡功能来打开和关闭标签并使用属性来设置值标签。不需要使用 JSX 本地反应，可以使用纯 Java，但 JSX 建议它的简单定义树结构。如果你有很多 UI 的代码，通过大型的 JSX 树结构将更容易阅读理解。
var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, });
上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS（层叠样式表），在此之前这应该是熟悉的。React Native 使用 CSS 样式应用程序的UI。如果你看看 JSX 代码，会看到不同风格的代码被用在不同的地方。例如: style={style.container}设置样式定义容器的外部视图包含其他UI组件。
上面的样式应用可于视图的内容。如果做过 web 开发或用过 CSS（层叠样式表），在此之前这应该是熟悉的。React Native 使用 CSS 样式应用程序的 UI。如果你看看 JSX 代码，会看到不同风格的代码被用在不同的地方。例如: style={style.container}设置样式定义容器的外部视图包含其他 UI 组件。