深入淺出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的中間啦~

 

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