React Native教程第一部分: Hello, React

原文:React Native Tutorial Part 1: Hello, React 

第一部分: Hello, React | 第二部分: 设计Calculator | 第三部分: 开发Calculator

本教程的完整代码在GitHub

介绍

React Native宣称了一种全新的原生iOS和安卓应用的开发方式,只使用一个基于React框架的代码。其思路是使用JavaScript写应用,React Native将编译本地的iOS和安卓应用。

React Native

对于用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-tutorial-6.png

这就是我们要创建的应用。选择开发计算器是因为它简单,可以让你比较快的学完这个教程,同时也能保证学到足够多的新东西。我推荐先照着这篇教程做一遍,然后自己在这个应用之上做些尝试。

配置

首先要做的事情就是安装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

下面是几点说明:

  1. React Native使用npm管理package,因此有node_modules目录。

  2. android 和ios目录包含了典型的Android/iOS 项目,可以分别使用Android Studio/Xcode打开或者运行。

  3. index.android.js 和 index.ios.js 文件包含了React Native源码的主入口。

接下来选择一个你喜欢的平台,使用下面的命令运行应用:

# For Android
$ react-native run-android
# For iOS
$ react-native run-ios

你会发现此时打开了一个运行React Native packager的命令行窗口。你不用管它,让它在后台运行就是了,它将处理打包以及我们写代码时的实时加载。

假设一切配置都是正确的,你应该可以看到下面的东西:

react-native-tutorial-1.png

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的时候遇到了几个问题,相信很多人都会遇到相同的问题。

  1. 一定要记得进入ReactCalculator目录再输react-native run-android命令。

  2. react-native run-android命令之后老是提示command not found,然而当我输入了ls -l(也就是完全按照作者步骤,我以为ls只是用来看目录内容的)之后,居然就能运行了。不知道是不是因为ls的原因,只是在这里说明当时的实际情况。

  3. react-native run-android命令虽然运行了,但是出现了如下的错误:

    5310FAC9-71C1-4F82-A053-8112D7EFAF23.png

    显然是因为找不到sdk的路径,我们需要设置ANDROID_HOME环境变量:

  4. 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-tutorial-2.png

重组代码

现在我们谢了我们的第一个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的布局。

教程二,点这里