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

來源:互聯網
上載者:User

標籤:

這是深入淺出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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.