React Native教程第一部分: Hello, React
2016-11-12 13:17 269 0
原文：React Native Tutorial Part 1: Hello, React
第一部分: Hello, React | 第二部分: 设计Calculator | 第三部分: 开发Calculator
本教程的完整代码在GitHub。
介绍
React Native宣称了一种全新的原生iOS和安卓应用的开发方式，只使用一个基于React框架的代码。其思路是使用JavaScript写应用，React Native将编译本地的iOS和安卓应用。
对于用Java, Swift 和 Objective-C编写双平台原生应用的经验无比丰富的我，最开始我对此是持怀疑态度的。这个框架如何克服在它之前的那些JavaScript/HTML5 框架所遇到的挑战呢？在尝试了之后，我必须得说这个疑虑是不必要的，React Native真的解决了前面那些做了同样宣称的框架所面临的问题。
这个教程将教你开发你的第一个React Native应用。使用的是目前最新（本文写作时的0.31版本），并分为三个部分：
-
第一部分将演示项目配置，按照套路写一个 “Hello World”应用，组织代码的结构为第二部分做准备。
-
在第二部分，我将带你使用React Native设计一个可以运行在双平台的计算器app。目的是让你快速了解React Native的基础知识，包括flexbox和style sheets，并为开发一个具有实际功能的计算器打好开头。
-
在第三部分，我们将开发实际的计算器，包括监听触摸事件，执行运算以及使用React Native的state更新UI。
The Application
这就是我们要创建的应用。选择开发计算器是因为它简单，可以让你比较快的学完这个教程，同时也能保证学到足够多的新东西。我推荐先照着这篇教程做一遍，然后自己在这个应用之上做些尝试。
配置
首先要做的事情就是安装React Native。
上面链接提供了针对Mac， Windows 和 Linux用户的操作指南，以及准备Android 和 iOS 开发环境的说明。
对于Mac用户，运行下面的三行命令基本上就ok了，对于Windows 或 Linux用户，请查看上面的链接。
$ brew install node
$ brew install watchman
$ npm install -g react-native-cli
注：文章作者假设你已经安装了Homebrew，没有安装的先安装，一行命令就可以安装完成，不过安装过程非常慢。
一旦完成了React Native的安装，我们就能开始创建我们的项目了：
$ react-native init ReactCalculator
过一会儿之后，你就应该得到一个设置如下的project了：
$ cd ReactCalculator
$ ls -l
drwxr-xr-x+ 10 kylewbanks staff 340 Aug 7 11:56 android
-rw-r--r--+ 1 kylewbanks staff 1106 Aug 7 11:56 index.android.js
-rw-r--r--+ 1 kylewbanks staff 1072 Aug 7 11:56 index.ios.js
drwxr-xr-x+ 5 kylewbanks staff 170 Aug 7 11:56 ios
drwxr-xr-x+ 585 kylewbanks staff 19890 Aug 7 11:56 node_modules
-rw-r--r--+ 1 kylewbanks staff 239 Aug 7 11:56 package.json
下面是几点说明：
-
React Native使用npm管理package，因此有node_modules目录。
-
android 和ios目录包含了典型的Android/iOS 项目，可以分别使用Android Studio/Xcode打开或者运行。
-
index.android.js 和 index.ios.js 文件包含了React Native源码的主入口。
接下来选择一个你喜欢的平台，使用下面的命令运行应用：
# For Android
$ react-native run-android
# For iOS
$ react-native run-ios
你会发现此时打开了一个运行React Native packager的命令行窗口。你不用管它，让它在后台运行就是了，它将处理打包以及我们写代码时的实时加载。
假设一切配置都是正确的，你应该可以看到下面的东西：
Go head and give the device a shake and you should see some developer options appear. These can be incredibly useful when developing and debugging React Native applications, and I highly recommend you try them out, but we won’t be going over them in this tutorial.
注：我在运行react-native run-android的时候遇到了几个问题，相信很多人都会遇到相同的问题。
-
一定要记得进入ReactCalculator目录再输react-native run-android命令。
-
react-native run-android命令之后老是提示command not found，然而当我输入了ls -l（也就是完全按照作者步骤，我以为ls只是用来看目录内容的）之后，居然就能运行了。不知道是不是因为ls的原因，只是在这里说明当时的实际情况。
-
react-native run-android命令虽然运行了，但是出现了如下的错误：
显然是因为找不到sdk的路径，我们需要设置ANDROID_HOME环境变量：
-
export ANDROID_HOME=/Users/<username>/Library/Android/sdk/ export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
Hello, React
好了，现在我们就有了自己的app了，但是这并没有什么用。我们把 index.android.js 和 index.ios.js文件的内容清除，为了更好的理解，我们将从头开始。
我们先导入一些必要的包。在每个index文件中，用下面的代码替换当前的内容：
import React, { Component } from 'react';
import {
Text,
AppRegistry
} from 'react-native';
React Native使用的是 ES6,，因此如果你不熟悉imports的话这对你可能有点陌生，但是本身并不难。我们所做的就是从react包中导入 React 和 Component ，从react-native包中导入 Text 和 AppRegistry。
导入了这些东西之后，我们就可以定义我们的ReactCalculator控件（component）了。一个component本质上是一个view，可以包含子view和子控件。按如下方法定义我们的根控件ReactCalculator：
class ReactCalculator extends Component {
render() {
return (
<Text>Hello, React!</Text>
)
}
}
ReactCalculator继承Component类，重写render函数来渲染它的UI。至此，我们只是渲染出了一个简单的Hello, React! 文字标签，但是很快这个render函数将变得更复杂。
最后，在我们运行app之前，我们需要使用前面导入的AppRegistry注册ReactCalculator。本教程不会讲解AppRegistry的细节，因为基本上你只需要注册你的根控件，所以目前我们只要设置了它就不管了：
AppRegistry.registerComponent('ReactCalculator', () => ReactCalculator);
这样做的原因是前面react-native为我们初始化的Android 和 iOS 本地代码在启动的时候需要找到标志为ReactCalculator的根空间。本地代码使用注册的控件去初始化application，之后绝大部分时间都是在和React Native代码工作，不再需要注册任何的控件。
好了，再次运行application，此时你应该会看到屏幕上显示出一条不甚好看的Hello, React! 消息：
重组代码
现在我们谢了我们的第一个React Native应用，但是有个操蛋的问题是我们必须在index.android.js 和 index.ios.js文件中写两份相同的代码。幸运的是，我们可以从别的包里面导入代码！我们创建一个新的目录src/，然后在里面创建一个ReactCalculator.js文件：
$ mkdir src
$ touch src/ReactCalculator.js
把 index.android.js 和 index.ios.js 文件中的代码放入新的ReactCalculator.js中，这样我们就不会有重复的代码了：
// src/ReactCalculator.js
import React, { Component } from 'react';
import {
Text,
AppRegistry
} from 'react-native';
class ReactCalculator extends Component {
render() {
return (
<Text>Hello, React!</Text>
)
}
}
AppRegistry.registerComponent('ReactCalculator', () => ReactCalculator);
然后在index.android.js 和 index.ios.js中，我们只要导入ReactCalculator的代码就可以了：
import ReactCalculator from './src/ReactCalculator';
我们运行，你会看到和刚才相同的 Hello, React! 。解决了代码重复的问题，现在我们可以继续开发我们的应用了。
在React Native中，当你导入了一个源文件比如ReactCalculator.js或者一个图像的时候，React Native会首先为代码运行的平台检查是否存在相应的ReactCalculator.android.js 或者 ReactCalculator.ios.js，如果有则导入。这让你可以针对特定的平台指定源码或者assets。对我们今天的目的而言，我们不会创建任何针对特定平台的功能，所以我们的源代码只使用.js扩展名，即两个平台的代码都是一样的。
总结
到目前为止我们得到了一个干净的 React Native 项目设置，我们可以向app里添加一些实际的功能了。教程的第二部分将接着这里继续calculator app的布局。
教程二，点这里。
