developerWorks 社区
借助 React Native 进入移动快车道，React Native 是发展最快的 iOS 开发平台和工具集。本文暂不考虑 Objective-C 和 Swift 教程，而是开始使用 JavaScript 编写 iOS 应用程序。本文提供了 React Native 的介绍，将了解它的架构和内部操作，还将完成一个突出了 React Native 编程技术的示例应用程序。
Sing Li, 顾问, Makawave
发布取得极大成功的
JavaScript 开源 UI 库两年后，Facebook/Instagram 在 2015 年 5 月的 F8 大会期间引起了另一场轰动。令充满艳羡的全球开发人员社区（包括旧 React 兄弟产品的坚定支持者）高兴的是，开源的
项目迅速在 GitHub 上流行起来。在短短的 3 个月内，React Native 获得了超过 170 个全球贡献者的支持，获得了超过 15,000 位明星的支持。什么令人震惊的功能能换来如此热情的欢迎？简言之：JavaScript 中超级容易的 iOS 应用程序开发。React Native 完成并超越这一目标，使它成为自 iOS 诞生以来发展最快的开发平台和工具。本教程将介绍 React Native 并解释它的架构和内部操作。您将完成一个完整的应用程序示例，该示例突出了重要的 React Native 开发技术。文中还提供了可用于 React Native 的工具的简要概述。您需要熟悉 React 编程才能掌握 React Native 的精髓；本教程假设您熟悉 React 编程。充满积极性的 JavaScript 开发人员可通过一个下午轻松地学习两种库。相对而言，正式加入传统的 iOS 开发通常会花几个月，通常需要花几个星期来掌握古老的 Objective-C（或新的 Swift）编程语言，理解特定于 iOS 的布局和 UI 构建技术和工具，掌握复杂的 Xcode IDE 的精髓，并熟悉一种多方面的构建工作流。React Native 内幕探秘React Native 针对移动开发改写了 React（已是一个得到数万忠诚的 JavaScript 开发人员使用的成熟的库）的最优秀特性。借助 React，您可以通过高性能、可重用的组件构建应用程序，设计这些精益的组件。React 通过将 Web 开发人员与浏览器的怪异 DOM 相隔离来提高性能 — 通过虚拟 DOM 的概念。您的 React 代码修改了虚拟 DOM，React 运行时负责优化物理 DOM 的刷新和更新。React Native 架构在 React Native 中，您还可以修改一个虚拟 DOM 来编程。但不同于 React，这个 DOM 没有物理浏览器提供支持。相反，虚拟 DOM 的目标渲染输出由真实的原生 iOS UI 组件组成。所有这些魔力都通过一个优化的异步桥 来实现的。图 1 演示了 React Native 的运行时架构。图 1. React Native 的高级运行时架构在这个灵活的架构中，JavaScript 解释器可以在任何地方运行。通常，解释器在设备或模拟器上的原生应用程序内的一个线程上运行。但是，在远程调试期间，JavaScript 代码可在开发人员的浏览器中运行（参见 “” 小节）。图像编码、磁盘 I/O 和布局等耗时的任务，可以移交给其他工作线程，充分利用现代移动设备上的多核 CPU 所提供的并行性。为原生 iOS 平台组件提供补充React Native 的编程模型将会尽可能隐藏您没有在浏览器中运行代码的事实。但是，标准 HTML 组件所拥有的许多特性和属性在原生 iOS 平台 UI 组件上不可用（反之亦然）。所以在使用 React Native 编程时，只能使用标准属性的一个子集。（参阅 React Native ，了解有关的详细信息。） 不同于 DOM 组件，iOS UI 组件不会响应 CSS 样式。因为这个原因，React Native 通过 JavaScript StyleSheet 对象而不是 CSS 来执行所有样式。但是，React Native 支持一种人们所熟悉的类似 CSS 的语法，该语法提供了部分人们熟悉的 CSS 属性选择器。iOS 应用程序中的用户输入事件处理与典型 Web 应用程序有明显不同。React Native 提供了一个依据 iOS 自己的手势响应系统而建模的全面的 Gesture Responder 系统。如果有必要，应用程序可以调整 Gesture Responder，通过组件层获得对事件传播和自定义升级的细粒度控制。最后但同样重要的是，使用 Objective-C/Swift 的典型移动开发人员能够获得对底层平台 API 的丰富支持 — 从相机控制到网络访问，再到电话联系人管理。React Native 无法支持所有这些特性，仍然保持简洁。相反，React Native 架构中心的异步桥支持任意 Objective-C API 到 JavaScript 的双向导出。这种设计使 React Native 团队（以及更大的 React Native 开发人员社区）能够逐步迁移平台特性和 API。React Native 示例应用程序分析本教程的示例是一个文档和视频查看器应用程序。在启动该应用程序时，初始屏幕将会显示一个可滚动的文章列表，如图 2 所示。图 2. 应用程序显示的可选择的文章列表如果选择一篇文章，这篇文章就会显示在 Web 视图中供阅读，如图 3 所示。图 3. 选择阅读的文章您可以触摸左上角的 Articles 链接返回到文章列表。触摸 Videos 可以查看可用的开源视频列表，如图 4 所示。图 4. 应用程序显示了可用视频列表选择任何视频即可在一个新视频视图中开始播放它，如图 5 所示。图 5. 应用程序播放开源的 Elephants Dream 影片您可以随时触摸左上角的 Videos 链接停止视频回放，返回到视频列表。图 6 显示了此应用程序中的故事板屏幕流。从显示文章的主屏幕中，您可以导航到视频列表，或者选择一篇文章，在 Web 视图中显示它。从视频列表，您可以选择一个视频来开始播放它，或者返回到文章列表。在这些屏幕背后，一个 &NavigationIOS& 组件是故事板流的编排器（参阅 “” 小节）。图 6. dwviewer 应用程序的故事板流安装 React Native 和运行示例应用程序Apple 要求在 Mac 上执行所有 iOS 开发。您需要在 Mac 上安装一个最新的 Xcode 版本来处理 iOS 应用程序，包括您使用 React Native 构建的应用程序。确保您在已满足这个
中的所有要求的 Mac 上。另外，按照指南，通过以下命令安装 React Native：npm install -g react-native-cli在项目目录中，运行：npm installReact Native 有一个生成器创建了一个可以自定义的有效的骨架样板应用程序。您需要的所有工具都集成在应用程序中，您只需要打开它的 .xcodeproj 文件并在 Xcode 中运行它。Xcode 构建该应用程序，启动一个 PC 到模拟器/设备的桥接打包服务器，然后在 iOS 模拟器（或真实设备）上启动该应用程序。 教程的示例代码，其中包含已完成的 dwviewer 应用程序。在根目录上运行 npm install，然后通过以下命令打开 Xcode 项目文件：open dwviewer.xcodeproj然后单击 Xcode 中的 run 来构建该项目，在一个 shell 中启动打包服务器，然后在模拟器中启动该应用程序。该应用程序将会显示如
所示的初始屏幕。一旦 React Native 应用程序在模拟器中运行，您就可以按下一个热键来触发通过打包服务器对 JavaScript 代码的重新加载。（当应用程序在设备上运行时，摇晃设备具有相同的效果。）打包服务器也会定期扫描项目目录中的 JavaScript 源代码更改，在您编码过程中向您提醒任何编译错误。Xcode 的应用程序分析器自动启动，所以您可以在应用程序在模拟器中运行时实时监视它的内存和 CPU 需求。深入分析代码可以在 index.ios.js 文件中找到示例应用程序的所有代码。一个补充性的 datasource.js 文件为应用程序提供了数据。放置一个 article-list 单元作为 React 用户，您会发现代码的结构让您感到很熟悉。除了 JavaScript 代码（参阅
边栏）之外，您还会看到使用 JSX 语法的 render() 调用。清单 1 中的代码定义了一个 article-list 单元。清单 1. 一个 article-list 单元的定义renderArticle: function(article) {
&TouchableOpacity
activeOpacity={0.5}
onPress={() =& this.showArticle(article.url)}&
&View style={styles.cellcontainer}&
&View style={styles.celltitlerow}&
&Text style={styles.title}&{article.title}&/Text&
&Text style={styles.year}&({article.year})&/Text&
&Text style={styles.description}&{article.desc}&/Text&
&/TouchableOpacity&
},article-list 单元是 &TouchableOpacity&、&View& 和 &Text& 组件的组合。 使用 &TouchableOpacity& 即时响应触摸 组件包装 laid-out 单元，并在用户触摸该单元时提供一个不透明性更改反馈动画，该动画完全由原生组件处理。这种实时反馈是原生 iOS 应用程序与在移动设备上运行的 Web 应用程序的一大区别。activeOpacity 特性指定在触摸单元时要使用的不透明性（半透明或完全不透明）。&TouchableOpacity& 组件还通过 onPress 处理函数转发事件（一个 React 合成 事件）。在本例中，ArticleView 自己的 showArticle() 方法是通过文章的 URL 调用的。React Native 还拥有
组件来对用户触摸包装的组件时的即时反馈效果进行进一步控制。通过 JavaScript StyleSheet API 和 FlexBox 设置组件的样式在
中，请注意，我们使用了 style={styles.*} 来设置各种组件的样式。React Native 使用一个支持 FlexBox 布局的 JavaScript （参阅
边栏）。该应用程序的样式在清单 2 中的代码中定义。清单 2. 样式定义var styles = StyleSheet.create({
cellcontainer: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'stretch',
backgroundColor: '#F5FCFF',
borderWidth: 0.5,
borderColor: '#d6d7da',
padding: 5,
celltitlerow: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'stretch',
backgroundColor: '#F5FCFF',
});在清单 2 中，您可以看到类似 CSS 的熟悉的选择器（出于 JavaScript 兼容性考虑，使用了驼峰样式取代带连字符的选择器名称）和 FlexBox 布局选项。使用 &NavigatorIOS& 组件编排视图触摸一个文章单元时，会调用 showTouch() 方法，该文章会使用一个
组件来显示：showArticle: function(articleURL) {
this.props.navigator.push({
title: "Article",
component: WebView,
passProps: {url: articleURL},
},&WebView& 组件在一个可配置的微型浏览器中显示选定的文章。&WebView& 由一个
组件以动画方式从右侧进入，该组件可通过 navigator 特性进行引用。&NavigatorIOS& 包装了大部分典型的 iOS 开发人员都熟悉的标准 iOS UIKit UINavgationController 的视图堆栈管理 API。&NavigatorIOS& 提供了各种 API 来推送、弹出和操作一个视图堆栈。它还通过标题栏上可选的可除模按钮提供了前进和后退导航。&NavigationIOS& 组件是应用程序的根组件，如清单 3 所示。清单 3. 创建 &NavigationIOS& 组件var dwViewerApp = React.createClass({
render: function() {
&NavigatorIOS ref='nav' style={styles.container}
initialRoute={{
component: ArticlesView,
title: 'Articles',
rightButtonTitle: 'Videos',
onRightButtonPress: this.onButPress,
});initialRoute 特性指定要显示的初始视图，在本例中为 ArticlesView。路由包括要在视图中显示的标题，以及可选的按钮标题和触摸处理函数。如果要指定初始视图，标题栏的左侧和右侧会显示这些按钮。&NavigationIOS& 将一个 navigator 特性传递给它的所有直系子对象，在本例中为 ArticlesView。子对象可使用这个 navigator 特性来操作托管的视图堆栈。使用 &ListView& 组件文章列表由 ArticlesView 组件显示，该组件合成了一个 React Native ，如清单 4 所示。清单 4. 合成一个 &ListView&var ArticlesView = React.createClass({
render: function() {
dataSource={this.state.dataSource}
renderRow={this.renderArticle}
style={styles.listView}
},尽管 &ListView& 没有包装原生的 UIKit UITableView 组件（几乎所有原生 iOS 应用程序都使用它来显示列表），但它提供了可在异步桥接操作上保持足够的性能的自己的版本。&ListView& 通过 datasource 特性加载它的数据，该特性在这里被指定为 ArticleView 的 dataSource 状态变量。renderRow 特性设置为您之前看到的 renderArticle() 方法，该方法渲染了一个文章单元。dataSource 状态变量通过 datasource.js 加载 &ListView& 的数据，该文件将该数据定义为一个静态编码的 JSON 对象数组。在首次显示视图中，会通过 ArticlesView 的 componentDidMount 处理函数抓取 &ListView& 的数据一次。var DataSource = require('./datasource');
componentDidMount: function() {
this.setState({
dataSource:
this.state.dataSource.cloneWithRows(DataSource.getArticles()),
loaded: true,
},在文章和视频之间导航用户触摸右上角的 Videos 按钮时，将调用 ArticleView 的 onButPress() 方法。此方法将会调用 &NavigatorIOS& 的 push() 方法，将一个 VideosView 实例推送到堆栈上，导致视频列表从右侧滑入：onButPress: function() {
this.refs.nav.push({
component: VideosView,
title: "Videos",
},显示 VideosView 时，在标题栏上显示了一个 Articles 按钮（参见 ）。用户可以触摸该按钮，从堆栈中关闭当前视图并返回到文章列表。放置 video-list 单元video-list 单元通过将 React Native 组件组合在 VideosView 的 renderVideo 方法中来放置，如清单 5 所示。清单 5. 放置一个 video-list 单元renderVideo: function(video) {
&TouchableOpacity
activeOpacity={0.5}
onPress={() =& this.showVideo(video.title, video.url)}&
&View style={styles.videoscontainer}&
&Image source={{uri: video.icon}} style={styles.vicon} /&
&View style={styles.videocellcontainer}&
&View style={styles.celltitlerow}&
&Text style={styles.title}&{video.title}&/Text&
&Text style={styles.year}&({video.year})&/Text&
&Text style={styles.description}&{video.desc}&/Text&
&/TouchableOpacity&
},此布局看起来与文章单元的布局很相似。仅增加了一个
组件，用于显示视频的图标。为了能够离线访问，这些静态的 PGN 文件必须通过应用程序的 Images.xcassets 文件添加到应用程序的资源包中。请参阅 React Native 文档中的
说明（向下滚动以查看该节）。集成一个社区贡献的 React Native 组件VideosView 的 Listview 的加载和视频选择的处理等同于 ArticlesView，留作练习供您跟踪分析。一个主要的区别是实际视频的显示。没有使用 &WebView& 来显示视频，该应用程序使用一个第三方 &Video& React Native 组件：（由社区成员 Brent Vatne 创建）。如果您想要将此组件添加到自己的应用程序中，请确保按照 Vatne 的 （下滚以查看它们）将它安装到您的 Xcode 项目中。创建您自己的应用程序时，您可能希望探索 GitHub 上
由社区贡献的 React Native 组件。这个第三方 &Video& 组件由 VideoViewer 类包装，如清单 6 所示。清单 6. 包装 &Video& 组件var VideoViewer = React.createClass({
render: function ()
&View style={styles.vidcontainer}&
&Video source={this.props.source}
rate={1.0}
volume={1.0}
muted={false}
paused={false}
resizeMode="stretch"
style={styles.video}
},这个 VideoViewer 在通过 VideosView 的 showVideo() 方法选择一个视图时推送到视图堆栈上：showVideo: function(title, url) {
this.props.navigator.push({
title: title,
component: VideoViewer,
passProps: {source: {uri: url}},
},该应用程序的代码分析到此已完成了。强大的工具，即时满足您的需求单单作为一个开源库，React Native 也是一大进步。但让它大放异彩的是 React Native 随带的实用的工具集。这些工具利用了可供 JavaScript 开发人员使用的现有的丰富且成熟的工具。图 7 显示了应用程序内的开发人员菜单，它在您运行 React Native 应用程序时通过一个热键弹出 — 无论是在模拟器中运行还是在实际设备上运行。您可以重新加载该应用程序，开始剖析代码，度量当前的每秒渲染帧数 (FPS)。您还可以通过 Chrome 或 Safari 内置的 JavaScript 调试器来远程调试您的 JavaScript 代码。借助远程调试，您可以单步调试，检查或修改时间点变量值，设置断点，等等。图 7.
显示了应用程序内的开发人员菜单的原生应用程序借助 Inspect Element 选项，您可以在原生 iOS 应用程序运行期间检查 React Native 组件的样式和属性。该显示视图在设备屏幕上弹出，类似于我们已熟悉的基于浏览器的检查元素布局。图 8 显示了这种应用程序内的覆盖图。图 8. 支持类似浏览器的动态元素检查的应用程序内的覆盖图这些应用程序内、屏幕上的开发人员辅助特性，是使用 pragmatic 的原生 iOS 开发人员梦寐以求但从未体验过的。使用 React Native 的 JavaScript 开发人员还可以在官方的 1.0 版发布之前使用它们。结束语如果您是梦想为应用商店编写 iOS 应用程序的 JavaScript 开发人员，那么您的梦想现在可以实现了。React Native 现在将您的 React 编程技能扩展到了 iOS，而且很快就会将它们扩展到 Android。丰富的社区支持可确保可供使用的新组件和特性 API 会无止境地出现。React Native 已展现出一种永不停歇的发展态势，我敢肯定，这将使它成为首选的主流 iOS 开发平台。React Native 使 iOS 移动应用程序开发变得比以往更加有趣。
下载描述名字大小本文的示例应用程序的源代码142KB
参考资料 在
中获取本教程的示例源代码的最新更新。：访问官方 React Native 站点并查阅 。：在 Apple 的
上了解所有可用的 iOS 平台 UI 组件和平台 API 的更多信息。：观看来自 2015 ReactConf 的介绍 React Native、Relay 和 React 生态系统中其他相关技术的视频。：从 GitHub 存储库中获取 React Native 的源代码。：在 IRC 上与其他 React Native 专家进行交流。
developerWorks: 登录
标有星（*）号的字段是必填字段。
保持登录。
单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件。
在您首次登录 developerWorks 时，会为您创建一份个人概要。您的个人概要中的信息（您的姓名、国家/地区，以及公司名称）是公开显示的，而且会随着您发布的任何内容一起显示，除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。
所有提交的信息确保安全。
选择您的昵称
当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。昵称长度在 3 至 31 个字符之间。
您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。
标有星（*）号的字段是必填字段。
(昵称长度在 3 至 31 个字符之间)
单击提交则表示您同意developerWorks 的条款和条件。 .
所有提交的信息确保安全。
文章、教程、演示，帮助您构建、部署和管理云应用。
立即加入来自 IBM 的专业 IT 社交网络。
免费下载、试用软件产品，构建应用并提升技能。
static.content.url=/developerworks/js/artrating/SITE_ID=10Zone=移动开发, Web development, Open sourceArticleID=1013507ArticleTitle=React Native：进入一个新的快速 iOS 开发世界publish-date=不论是React还是React-native，facebook官方都推荐使用ES6的语法，没在项目中使用过的话，突然转换过来会遇到一些问题，如果还没有时间系统的学习下ES6那么注意一些常见的写法暂时也就够用的，这会给我们的开发带来很大的便捷，你会体验到ES6语法的无比简洁。下面就介绍我在react和react-native中从ES5转到ES6中体会到的几个对比。
ES6写组件的区别
直接在React v0.13.0 Beta 1中一个官方的演示来说明：
export class Counter ponent {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.setState({count: this.state.count + 1});
render() {
&div onClick={this.tick.bind(this)}&
Clicks: {this.state.count}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };
和React.createClass方法来创建组件对比一下：
const Counter = React.createClass ({
getDefaultProps : function () {
initialCount : 0
propTypes: {
initialCount: React.PropTypes.number
getInitialState: function() {
return { count:
this.props.initialConunt};
tick: function() {
this.setState({count: this.state.count + 1});
render: function() {
&div onClick={this.tick}&
Clicks: {this.state.count}
主要有三个区别：
创建组件的方法
用class声明来取代了React.createClass，这里简洁了许多。
ES6中需要用在constructor中有super(props)来传递props。
ES6中getDefaultProps是class的属性而不是方法，不能定义在组件内部，需要单独写在外面。
同理，ES6中propTypes也需要写在外面。
ES6不在需要getInitialState方法，而是直接在constructor中直接用this.state即可，更加方便。
this的绑定
这段代码采用了ES6后其中onClick={this.tick.bind(this)这里需要采用bind方法来绑定this，如果不绑定this，this.tick方法的this就会指向全局，绑定了this之后将this绑定到组件实例之上。但是我们应该还记得js中bind方法每运行一次就返回一个新的函数，在react中也就是每次render都会创建一个新的函数，所以我们最好将其绑定constructor中：
export class Counter ponent {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.tick = this.tick.bind(this);
this.setState({count: this.state.count + 1});
render() {
&div onClick={this.tick}&
Clicks: {this.state.count}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };
这样只会创建一次。当然这样写略显繁琐，有没有更好的方法呢？ 当然！ ES6为我们提供了箭头函数，根本不需要在绑定this这种操作了。
export class Counter ponent {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
tick = () =& {
this.setState({count: this.state.count + 1});
render() {
&div onClick={this.tick}&
Clicks: {this.state.count}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };
箭头函数不会创建自身的this上下文，this就指向组件实例。建议就用箭头函数，代码会精简很多。
知道这几点区别以后，再去找个教程熟悉下ES6的语法，基本就可以用ES6来写react了，感觉js的标准越来越向java和python等靠近，前端后端都要融合了哈哈。
阅读(...) 评论()为React Native开发写的JS和React入门知识
想来想去，还是需要写一篇文章来介绍下Script和React的基本知识。最初开发ReactNative的时候，完全没接触过React，大学那会简单学了点JS。毕业后一直在某五百强外企上班。做的东西也乱七八糟的，搞过大数据，搞过物联网，不过看我博客的同学应该知道，我对iOS和还是比较喜欢的。所以，博客都是写的都是移动端的东西。好像扯的有点多了，本文的目的就是为了那些JS和React小白提供一个快速入门，能够在看React Native语法的时候能够不那么吃力，有过JS经验的同学可以直接略过了
先安装React Native，然后初始化一个示例工程
react-native init JSReactBasics
会生成如下一个目录
然后，XCode打开JSReactBasics.xcodeproj，运行模拟器会看到如下截图
本文，示例代码都是修改的index.ios.js，每次修改后选择保存。Command + R就可以动态刷新了。
默认创建的index.ios.js如下
* Sample React Native App
* /facebook/react-native
//导入一些必要的模块
import React, {
AppRegistry,
Component,
StyleSheet,
} from 'react-native';
//类，这是默认的载入类，继承自Component，Component类似于Android和iOS中的View
class JSReactBasics extends Component {
render() {
Welcome to React Native!
To get started, edit index.ios.js
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
//定义风格
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
instructions: {
textAlign: 'center',
color: '#;,
marginBottom: 5,
AppRegistry.registerComponent('JSReactBasics', () =& JSReactBasics);
JS是一个轻量级的，解释型的讲函数视为一级公民的程序设计语言。他是一种基于原型的多范式动态脚本语言，支持面向对象，命令式和函数式编程。
JavaScript的标准是 ,React Native的语法是基于ECMAScript 6，简称ES6.
Tips：Java和JavaScript语法很像，但是用处完全不同，而且也是两个几乎没关系的东西
关于Java和JS的区分，可以见如下表
JavaScript
面向对象。不区分对象类型。通过原型机制继承，任何对象的属性和方法均可以被动态添加。
基于类。分为类和实例，通过类层级的定义实现继承。不能动态增加对象或类的属性或方法
变量类型不需要提前声明(动态类型)。
变量类型必须提前声明(静态类型)。
不能直接自动写入硬盘。
可以直接自动写入硬盘
JS的基础知识
var 声明变量，可以在声明的时候初始化为一个值 let 声明块范围局部变量，可以在声明的时候初始化一个值 const 声明一个只读常量
Tips：JS是大小写敏感的
变量，常量
命名要以数字字母下划线开头
例如，在class ReactJSBasics上添加两行
var mainText = &来自Leo的博客&
var subText = &欢迎&
Tips:JS是一个动态类型语言(dynamically typed language)中，所以变量不需声明类型，必要的时候自动转换
然后，让Text来显示这个这两个变量
{mainText}
然后save，选择模拟器，Command＋R刷新，会看到截图如下
常量可以看到index.ios.js文件最下面有类似
const styles = StyleSheet.create({....
就是一个常量。在声明的时候，必须初始化
数据结构和类型
六种基本的原型数据类型
Boolean，布尔值，true或者false null，一个表明null的特殊关键字，注意JS中大小写敏感，null和NULL是完全不同的东西 undefined.变量为定义的属性 Number，数字 String，字符串 Symbol ，ES6中新增的，唯一不可变的
以及Object类型
if,else switch for while break continue
这个各个语言大同小异，不浪费篇幅了,有一点要提一下，JS中的Switch Case中可以是String
有一点要注意，以下值在JS中是会识别为false
空字符串 (&&)
// 这是一个单行注释.
/* 这是一个多行注释。它可以是任意长度，你可以在这里随便写什么。 */
从ES6开始，JS中引入了Promises来处理异步和延迟操作，在React Native的网络请求中是很常见的。
一个promise有以下几种状态
pending，最初的状态 fulfilled，执行失败 rejected，执行成功 settled，执行结束了，失败(rejected)或者成功(fulfilled)
控制图如下
函数的定义如下，由function关键字声明，在()添加输入，输入不需要声明类型
function globalFunction(input){
console.log(input);
我们接着上述的工程，添加一个可点击的TouchableHighLight
在import中，添加一行
TouchableHighlight
重新定义变量和类的内容
var mainText = &点击屏幕任意位置&
function globalFunction(input){
console.log(input);
class JSReactBasics extends Component {
render() {
globalFunction(&输入&)}
underlayColor = '#ddd'
style = {styles.container}
{mainText}
然后，save，command+R刷新，再点击屏幕任意位置，会发现如下log
这样的方法是定义在全局的，当在类中定义的时候，不需要funciton关键字
通过this.functionName来访问
var mainText = &点击屏幕任意位置&
class JSReactBasics extends Component {
render() {
this.backgorundClicked()}
underlayColor = '#ddd'
style = {styles.container}
{mainText}
backgorundClicked(){
console.log(&类中的方法&);
箭头函数(Arrow functions)
没接触过JS的同学可能会对
onPress={() =& this.backgorundClicked()
这一行感到很奇怪，其实这里onPress是一个函数类型（在JS中，函数本身也是一种类型）。这其实是JS中的箭头函数，他提供了一种更简洁的函数表达方式
修改backgorundClicked，为如下内容
backgorundClicked(){
&Hydrogen&,
&Lithium&,
&Beryl-lium&
var a2 = a.map(function(s){ return s.length });
var a3 = a.map( (s) =& s.length );
console.log(a2);
console.log(a3);
然后，save,Commnad+R刷新，可以看到两个log的内容是一样的。也就是说，(s)用来描述参数，=&后的表示方法的执行体。学过Swift的童鞋，会发现和Swift的必包很像。
可以由以下三种方式创建数组，访问数组的方式还是通过角标来访访问
var a = [&1&,&2&,&3&,&4&];
var b = new Array(&1&,&2&,&3&,&4&)
var c = Array(&1&,&2&,&3&,&4&)
console.log(a[1]);
数组有一些方便的方法，例如合并，排序，检索等，可以在上找到
var map = {&key1&:&value1&,&key2&:&value2&}
var map = {&key1&:&value1&,&key2&:&value2&}
map[&key4&] = &value4&
console.log(map[&key1&])
console.log(map[&key4&])
JS中的对象的属性可以不先声明，而在运行时候动态添加，例如
var obj = new Object()
obj.name = &1234&
console.log(obj.name);
所以，在React Native中，写代码的时候，存储数据直接this.propertyName ＝即可
JavaScript是基于原型的面对象语言
理解这一点，对使用JS开发还是比较重要的。
像Java，Objective C，C＋＋都是基于类的面向对象语言，面向对象语言有两个，基于类的面向对象语言主要有两个概念
类(class),定义了一组具有某一类特征的事务。类是抽象的，比如鸟类 实例（instance），实体是类的实体话提现，比如一只鸟
基于原型的面向对象
基于原型的面向对象语言并不存在这种区别，基于原型的面向对象语言所有的都是对象。基于原型的面向对象语言有一个概念叫做原型对象,古代有一种东西叫做活字印刷术，那一个个字的模版就是这里的原型对象。
Tips:React Native引入了基于类的面向对象编程概念，这个在后面讲解React基础的时候来介绍
通过比较Java和JS可以了解二者的区分
基于类的（Java）
基于原型的（JavaScript）
类和实例是不同的事物。
所有对象均为实例。
通过类定义来定义类；通过构造器方法来实例化类。
通过构造器函数来定义和创建一组对象。
通过 new 操作符创建单个对象。
通过类定义来定义现存类的子类，从而构建对象的层级结构。
指定一个对象作为原型并且与构造函数一起构建对象的层级结构
遵循原型链继承属性。
构造器函数或原型指定初始的属性集。允许动态地向单个的对象或者整个对象集中添加或移除属性。
什么是React？
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES（一个JavaScript的用来创建界面的库）
Tips:通过名字就可以看出来，ReactNative是基于React来写的支持编写原生App的框架
React的基础知识
React是整个React框架的入口
Component是React类的基类，类似于iOS的UIView和Android的View,React和React native都定义了很多方便的子类来给开发者使用。
React.createClass
创建一个Component
Component 相关对象方法
调用React.createClass或者让一个类继承自class JSReactBasics extends Component都是需要提供render函数的。这个函数返回一个根的视图，用来渲染实际的Component可视部分，例如例子中的，
render() {
this.backgorundClicked()}
underlayColor = '#ddd'
style = {styles.container}
{mainText}
getInitialState()
在Component被加载之前调用一次，这个方法的返回值回被设置为this.state
Tips:这个方法只能在用React.createClass创建的时候使用，例如，在我们示例代码中，加入一个方法
getInitialState(){
return {key:&value&}
会提示如下警告
getDefaultProps()
在Class 创建的时候，调用一次，这个方法在调用的时候，任何实例还没有被创建。还有一点要注意，这个方法返回的任何Object 对象，在各个实例中是共享的，而不是每个实例一个copy。
statics对象，用来定义Components可以调用的静态方法，例如
var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
render: function() {
MyComponent.customMethod('bar');
componentWillMount
在最初的渲染之前调用一次,在React中，设置this.state会导致重新渲染，但是componentWillMount设置this.state并不会对导致render调用多次
componentDidMount
在渲染结束后，调用一次
componentWillReceiveProps
在component接收到新的参数前调用，在这个方法中调用this.setState不会触发二次渲染，第一次渲染的时候不会调用这个方法
boolean shouldComponentUpdate(
object nextProps, object nextState
在每次重新触发渲染之前调用，其中nextProps和nextState分别对应下一个状态的参数和状态对象。可以在这个方法中返回false来取消本次渲染。
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.
在重新渲染之前调用
Warning：这个方法里不能调用this.setState()否则会陷入死循环
在渲染之后调用
componentWillUnmount
在被删除之前调用
为了更好的理解生命周期，我们来用React的风格重写示例代码
重写整个类
var JSReactBasics = React.createClass({
getInitialState(){
console.log(&getInitialState&);
return {key:&点击屏幕任意位置&}//设置最初的值
componentWillMount(){
console.log(&componentWillMount&);
componentDidMount(){
console.log(&componentDidMount&);
shouldComponentUpdate(nextProps,nextState){
console.log(&shouldComponentUpdate&);
return true
componentWillUpdate(nextProps,nextState){
console.log(&componentWillUpdate&);
componentDidUpdate(prevProps,prevState){
console.log(&componentDidUpdate&);
render() {
this.backgorundClicked()}
underlayColor = '#ddd'
style = {styles.container}
{this.state.key}
backgorundClicked(){
this.setState({
key:&设置了新的值&
然后，save，Command+R，会看到Log以及效果
16:06:52.904 [info][tid:com.facebook.react.JavaScript] getInitialState
16:06:52.904 [info][tid:com.facebook.react.JavaScript] componentWillMount
16:06:52.909 [info][tid:com.facebook.react.JavaScript] componentDidMount
然后，点击屏幕任何位置，会看到Log和截图
16:08:23.704 [info][tid:com.facebook.react.JavaScript] shouldComponentUpdate
16:08:23.704 [info][tid:com.facebook.react.JavaScript] componentWillUpdate
16:08:23.707 [info][tid:com.facebook.react.JavaScript] componentDidUpdate
从今天十点上班写道下午四点，想了想，应该还有些基础的部分要写的，先发布出来吧，后边继续写。