深入淺出React Native 3: 從零開始寫一個Hello World

這是深入淺出React Native的第三篇文章。

1. 環境配置

2. 我的第一個應用

---

將index.ios.js中的代碼全部刪掉，為什么要刪掉呢？因為我們准備從零開始寫一個應用~學習技術最好的方式就是自己動手寫，看別人的代碼一百遍的效果也不如自己寫一遍來的效果大~

我們要做的事情主要分成以下兩步：

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的中間啦~