如何用 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 的应用程序。

e}>

Welcome to React Native!

</Text>

<Text style={styles.instructions}>

To get started, edit index.ios.js

</Text>

<Text style={styles.instructions}>

Press Cmd+R to reload,{'\n'}

Cmd+Control+Z for dev menu

</Text>

</View>

);

}

});

上面创建一个类只有一个渲染 () 函数。在渲染函数中无论什么被定义都是将输出到屏幕上。上述使用

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