如何用React Native创建一个iOS APP？（如何用react开发小程序）

如何用React Native创建一个iOS APP？（如何用react开发小程序）

React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。

其好处显而易见：减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差，开发新功能可以更迅速。

下面，我们可以尝试用React Native创建一个 iOS APP.

在Mac下，如果用homebrew，那么只用一行就可以装好:

brew install node

brew install watchman

watchman是Facebook的一个文件观察者。React Native 用它来检测代码的变化.

接下来安装 npm

npm install -g react-native-cli

在终端，找到你希望保存的项目文件，然后运行下面的文件夹。

react-native init BookSearch

以上使用 CLI 工具来构建一个 Native 项目，是准备建立并运行原样。当这个过程完成后，你就会在终端窗口中打开 Xcode 的BookSearch.xcodeproj 并运行应用程序像往常一样。做到这一点，模拟器将启动您的应用程序的运行。一个终端窗口也将打开。当一个Native应用程序启动时，它加载从以下网址 JavaScript 的应用程序。

在任何时候做本教程时你可能会遇到一个红色屏幕模拟器，可以检查错误消息。它能让你知道这个问题是与你的代码还是服务器有关系。当我接收到错误的消息「无法连接到服务器」 在模拟器和检查终端有一个「流程终止」 错误消息时我陷入了服务器连接问题。当这种情况发生时，关闭终端窗口，停止在 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');

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 组件。

（未完待续）