深入浅出React Native 3: 从零开始写一个Hello World

这是深入浅出React Native的第三篇文章。

1. 环境配置

2. 我的第一个应用

我们要做的事情主要分成以下两步：

1. 创建组件

2. 将创建好的组件显示在app上

打开index.ios.js文件，输入

var HelloWorld = React.createClass({
  render: function () {
    return (
        <View>
          <Text>
            Hello World
          </Text>
        </View>
      )
  }
});

查找React文档可以看到该createClass的描述

ReactClass createClass(object specification)

通过传入一个描述说明（specification）来创建一个组件类，创建的这个组件类必须实现render这个方法，并且render方法只能返回一个节点，当然该节点可以包含任意多的子节点。

像上面我们创建了一个HelloWorld的组件类，该类实现了render这个方法，该方法只返回<View>这个子节点，当然，在<View>这个节点下还包含了<Text>这个节点。

第一步就完成了，你看，就是这么简单~

下面我们开始第二步。

AppRegistry.registerComponent(‘AwesomeProject‘, function() {
  return HelloWorld;
});

AppRegistry是运行React Native的应用程序的一个入口，一个应用程序的根组件必须通过调用AppRegistry.registerComponent方法将自己注册到应用中，这样原生系统才能正确加载并通过调用AppRegistry.runApplication来运行应用程序。

在我们的项目中，根组件就是我们的HelloWorld，至于第一个参数为什么是AwesomeProject，参看api可以看到

static registerComponent(appKey: string, getComponentFunc: ComponentProvider) 

第一个参数指的是appKey，如果大家还记得的话，我们通过react native命令行生成的项目模板的名字就叫做Awesome~当然这个名字可以改的，至于怎么改，我们以后再说，现在先保持这个名字。

这两件事情做完以后，切换回模拟器，CMD+R刷新(注意，服务器要保持运行状态哦~如果服务器停掉的话，npm start命令，还记得吗~不记得的话请翻看之前的教程哦)，咦，怎么神马都没有~当然，也可能界面上出现一大片红色的错误信息~~

打开xcode可以看到其中有一段这样的错误：

系统找不到我们使用的React变量，所以报错了~其实不仅仅React我们没有定义，AppRegistry, View, Text我们都没有定义~所以下面我们要讲React Native定义的这些变量引入~

在index.ios.js文件的最上面添加下述代码~

var React = require(‘react-native‘);
var AppRegistry = React.AppRegistry;
var View = React.View;
var Text = React.Text;

因为AppRegistry, View, Text是React的一个属性，所以引入方式与React不同~

打开模拟器，CMD+R刷新下，就可以看到hello world显示在界面上啦~只是......位置有点点尴尬。

为了让这个显示在中间，我们为其添加一些style~

第一步需要引入StyleSheet变量。在引入变量的最后添加下面的代码：

var StyleSheet = React.StyleSheet;

然后在AppRegistry.registerComponent方法的上面（其实位置无所谓，只需要在引入变量的下面就可以了，之所以写在registerComponent前面，只是为了代码看起来好看些~），添加

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘center‘
  }
});

我们会在后续讲解StyleSheet，现在只需要知道，StyleSheet是一种样式的抽象，类似于CSS。在上述的style中，我们将container定义为水平、垂直居中。

修改HelloWorld组件，为其添加我们设置的样式。

var HelloWorld = React.createClass({
  render: function () {
    return (
        <View style={styles.container}>
          <Text>
            Hello World
          </Text>
        </View>
      )
  }
});

大功告成~在模拟器上刷新，就可以看到Hello World这几个字显示在iphone的中间啦~