ReactNavtive框架教程（1）

原文：http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript

 注意：所有图片放在了百度相册空间，如果你看不到图片，请复制图片URL，然后粘贴到地址栏中进行查看。

开始

ReactNative 框架可以在GitHub 获得，你可以使用git clone命令或者直接下载zip包来获取它。

ReactNative 使用了 Node.js，如果你的机器上没有安装Node.js，请先安装它。 首先需要安装 Homebrew。然后用brew命令来安装Node.js:

brew install node

然后安装 watchman（用来监视文件改动情况）:

brew install watchman

然后安装React Native 的CLI:

npm install -g react-native-cli

npm将立即下载并安装CLI。npm是一个类似CocoPods或Carthage工具。

定位到要开发React Native App的文件夹，使用命令：

react-native init PropertyFinder

这将创建一个空的React Native项目。

在React Native项目文件夹中，node_modules文件夹将包含React Native 框架文件。此外还有一个 index.ios.js 文件，这也是CLI创建的。

还有一个Xcode项目文件及一个iOS文件夹，后者会有一些iOS代码用于引导ReactNavtive App。

打开Xcode项目文件，build&run。模拟器启动并显示如下界面：

与此同时Xcode还会打开一个终端窗口，并显示如下信息：

 ===============================================================

 |  Running packager on port 8081.      

 |  Keep this packager running while developing on any JS        

 |  projects. Feel free to close this tab and run your own     

 |  packager instance if you prefer.                             

 |                                                             

 |     https://github.com/facebook/react-native                

 |                                                              

 ===============================================================

 

Looking for JS files in

   /Users/colineberhardt/Temp/TestProject

 

React packager ready.

这是React Navtive Packager，它在node容器中运行。

千万不要关闭这个窗口，因为这会导致Xcode终止App并重新运行它。

注意: 在开始接触具体的代码之前（在本教程中，主要是js代码），我们将推荐 Sublime Text这个文本编辑工具，因为Xcode并不适合用于编写js代码的。当然，你也可以使用 atom, brackets 等其他轻量级的工具来替代。

Hello React Native

用你喜欢的文本编辑器（例如Sublime Text）打开index.ios.js ，删除所有内容。然后加入以下语句：

'use strict';

这将开启严谨模式，这会改进错误的处理并禁用某些js语法特性，这将让JavaScript表现得更好。

注意: 关于严谨模式，读者可以参考 Jon Resig的文章：“ECMAScript5 Strict Mode, JSON, and More”。

然后加入这一句：

var React = require('react-native');

这将加载 react-native 模块，并将其保存到React对象。React Native 使用和Node.js 一样的 require 函数来加载模块，类似于Swift中的import语句。

注意: 关于JavaScript 模块的概念，请参考 AddyOsmani的这篇文章。

然后敲入如下语句：

var styles = React.StyleSheet.create({

  text: {

    color: 'black',

    backgroundColor: 'white',

    fontSize: 30,

    margin: 80

  }

});

这将定义一个css样式，我们将在显示“Hello World”字符串时应用这个样式。

在React Native 中，我们可以使用 Cascading Style Sheets (CSS) 语法来格式化UI样式。

接下来敲入如下代码:

class PropertyFinderApp extends React.Component {

  render() {

    return React.createElement(React.Text, {style: styles.text}, "Hello World!");

  }

}

这里我们定义了一个JavaScript 类。JavaScript类的概念出现自ECMAScript 6。由于JavaScript是一门不断演变的语言，因此web开发者必须保持与浏览器的向下兼容。由于ReactNative基于JavaScriptCore，因此我们完全可以放心使用它的现代语法特性，而不需要操心与老版本浏览器兼容的问题。

注意:如果你是Web开发人员，我建议你使用新的JavaScript语法。有一些工具比如 Babel ，可以将现代JavaScript语法转变为传统JavaScript语法，这样就能和老式浏览器进行兼容。

PropertyFinderApp 类继承自 React.Componen，后者是React UI中的基础。Components包含了一些不可变属性、可变属性和一些渲染方法。当然，这个简单App中，我们就用到一个render方法。

ReactNative 的Components不同于UIKit 类，它们是轻量级的对象。框架会将ReactComponents转换为对应的本地UI对象。

最后敲入如下代码：

React.AppRegistry.registerComponent('PropertyFinder', function() { return PropertyFinderApp });

AppRegistry 代表了App的入口以及根组件。保存文件，返回Xcode。确保当前Scheme为PropertyFinder ，然后在模拟器运行App。你将看到如下效果：

看到了吧，模拟器将JavaScript代码渲染为本地UI组件，你不会看到任何浏览器的痕迹。

你可以这样来确认一下：

在Xcode中，选中 Debug\ViewDebugging\Capture View Hierarchy，查看本地视图树。你将找不到任何UIWebView实例。

在 Xcode 中打开 AppDelegate.m，找到application:didFinishLaunchingWithOptions:方法。

在这个方法中，创建了一个RCTRootView，该对象负责加载JavaScript App并渲染相关视图。

App一启动，RCTRootView会加载如下URL的内容:

http://localhost:8081/index.ios.bundle

还记得App启动时弹出的终端窗口吗？终端窗口中运行的packager和server会处理上述请求。

你可以用Safari来打开上述URL，你将会看到一些JavaScript代码。在ReactNative 框架代码中你会找到“Hello World”相关代码。

当App打开时，这些代码会被加载并执行。以我们的App来说，PropertyFinderApp组件会被加载，然后创建相应的本地UI组件。