1. 程式人生 > >ReactNative之從HelloWorld中看環境搭建、元件封裝、Props及State

ReactNative之從HelloWorld中看環境搭建、元件封裝、Props及State

開篇呢,先給大家問個好,今天是中秋節,祝大家中秋節快樂!!雖然是中秋節,但是木有回家還是總結一下知識點寫寫部落格吧,想著昨天總結一下的,但是昨天和幾個同學小聚了一下,酒逢知己總是千杯少呢,喝的微醺不適合寫東西,所以就留到今天總結了。因為這段時間在工作中陸陸續續的接觸到了一些RN開發的東西,還是需要總結一下的。今天只是個開篇,接下來還會有陸陸續續的關於RN開發的總結,今天主要是環境搭建、簡單的元件封裝、Props和State的介紹,稍後還會更新佈局、動畫等一些開發中常用的東西

雖然RN沒有Release版、雖然Airbnb放棄了RN、雖然Facebook正在重構RN, 但是RN還是動態化比較好的選擇方案的,還是要好好的搞一下RN的,當然也是工作中需要。既然要搞,就得認真呢,這篇是關於RN的第一篇部落格,後續還會有其他關於RN的部落格跟進的,也好在自己的學習歷程中打個Tag。今天部落格比較簡單,是RN入門級別的,當然進階的東西目前還沒有接觸過,等深入後再展開來記錄吧。

一、RN下的Hello World

接觸一個新的東西那必須從HelloWorld開始呢,下方就一步步的從無到有搞一個RN的Hello World!

1、安裝Node和VSCode

首先我們來搞一下Hello World前的準備工作,使用RN時,Node環境是必不可少的,如果你沒有Node環境可以使用brew進行安裝。(如果你還沒安裝Homebrew, 那麼請Google自行安裝)

brew install node

然後可以把node的源更新成taobao的映象,這樣訪問速度會快一些。

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

裝完Node後,然後就是選擇安裝一個開發RN的IDE了,當然你如果夠強大,完全可以用記事本來編寫RN的程式碼。當然用記事本是開玩笑的,可以用Sublime Text、Visual Studio Code等,如果比較土壕的程式設計師呢,你可以支援一下正版的Webstorm。當然想我這樣“溫飽都成問題”的程式猿,就只能用免費的VSCode了。

  

雖然本篇部落格使用的VScode,但是平時開發中用WebStorm感覺還是挺爽的。

2、安裝 exp

直接在模擬器上除錯,依賴於exp這個App,下方這個命令就是安裝exp。安裝完後,會在模擬器上看到Expo這個App, 下方我們就會用到這個Expo。

npm install exp --global

    

3、create-react-native-app and run app

安裝完Node後,使用Node的npm把create-react-native-app這個包裝一下,可以快速的建立一個RN-Project。

  

然後使用create-react-native-app可以建立一個RN工程了,下方建立了一個名為MyFirstRNProject的RN工程。

  

建立完相關的RN工程成功後會有相關的提示,我們還是按照其提示的倆,使用 yarn start 來啟動工程。

  

啟動後,會讓你選擇相關的執行方式,因為本篇部落格是在iOS環境下做的Demo,所有就直接選擇 i 即可。

  

 選擇 i 後,就會啟動模擬器中的Expo。可以用 command + D 來呼叫和隱藏開發除錯面板。然後就會看到右邊紅框找那個的預設的文案。

   

我們可以將預設的文案改一下,然後修改一下樣式,新增上我們的Hello World儲存即可。因為預設Live Reload是開啟的,所以當相關的檔案被修改後,模擬器上的工程會自動Reload載入改動後的效果,具體如下所示:

    

在上面的程式碼中我們還需注意到下方定義了一個 styles 的常量,該常量是我們需要的樣式物件。在RN中可以使用 StylesSheet.create()方法來建立我們需要的樣式。改樣式的定義規則與Web前端中的CSS差不多,使用方式頁非常的相似。下方我們還會定義其他的樣式表,稍後會介紹到。

二、使用TypeScript來開發RN

  

然後把工程中的App.js替換成App.tsx即可。(純ts檔案使用.ts來命名,有JSX的TS檔案則使用tsx來做字尾),改完再次執行我們的Hello World即可。

  

三、自定義元件(Componet)、Props以及State

實現完HelloWorld後我們來看一下RN中元件封裝的姿勢,下方會封裝一個HelloWorld的元件,然後在該元件的基礎上看一下RN中Props和State的使用姿勢。

1、HelloWorld元件封裝

在RN中封裝的元件都需要繼承自 Component 類,然後在該類中正常的去新增相關佈局和相關邏輯即可。下方我們將上述的HelloWorld進行了提取,建立了一個HelloWorld類,該類繼承自React中的Component。然後在render()方法中通過JSX來新增需要渲染的各種元件,當然在我們的HelloWorld中,我們只用到了Text這個元件來展示文字。

封裝的元件的使用姿勢與RN提供元件的使用姿勢是一樣的,都是通過JSX的語法來引入使用的。下方 <HelloWorld /> 就是我們封裝元件HelloWorld的使用姿勢。

  

2、Props - 屬性

屬性,說白了就是一個元件負責接送外部引數的一個東西,類似於一個方法的引數。當然,如果你使用一個Function來定義一個元件的話,那麼這個Props就是方法的引數。

在上面的HelloWorld的示例中,我們其實已經使用到了Props這個東西,只不過是系統自帶的,比如上面為HelloWorld指定的 style 就是一個props, 該props傳入的是一個樣式物件。我們從Web前端的角度來說,屬性這個東西應該是比較好理解的,div後邊跟的key 和 value, 後邊這個value就是相關key的屬性。接下來我們將要介紹如何給自定義的元件新增特定的屬性。

   

下方我們寫了一個HelloWorld的元件,該元件繼承與React中的Component,然後在render中渲染了一些元件,其中的Text是從屬性Props中取的,從下方程式碼中看出,直接從Props中取相應的Key是可以取到的,不過強取值的話,會標紅,會提示相關的熟悉在Props中不存在。稍後會解決該問題。

  

下方就是我們寫的Hello Props元件,元件中的相關內容時通過Props中的相關key-value來傳過來的。換句話說,Props就是一個傳值的JSON串。

  

通常我們在開發中會為Props定義相關的型別,來宣告Props中都有哪些東西,下方就是我們為上述的HelloWorld補的Props的型別,然後通過協議的形式指定給HelloWorld元件。從下程式碼我們看出,在Props型別後邊還有一個null的型別,該型別是宣告State的型別使用的。該處我們沒有相關的狀態,就暫且不指定,下方使用到的地方我們會給出相關的狀態值。

新增完相關的型別聲明後,之前下方標紅的地方就不存在了。

  

3、State-狀態

狀態對應RN來說有著舉足輕重的地位,整個RN的頁面或者一個小的RN元件都可以看做是一個狀態機,該狀態機就是通過這個State來管理的。State中可以存放各種狀態以及各種值,當這些值或者狀態被修改時,那麼這個元件節點就會被重新渲染,也就是更新頁面或者元件。下方我們就為我們的HelloWorld新增上相關的State狀態,然後通過該狀態所對應的值做一些事情。

  • 宣告State型別:首先我們像宣告之前的Props型別一樣聲明瞭一個HelloWorldStateType的狀態型別,然後HelloWorld元件中狀態型別的位置設定了該型別。改型別中有一個屬性,從狀態屬性我們不難看出是用來控制某個空是否展示白色的。
  • 初始State:我們指定狀態型別後,該狀態還需要一個初始狀態,於是在構造器中對該狀態進行了初始化。
  • 定時器修改狀態:然後我們用定義了一個定時器,使用定時器來定時的修改狀態的值,這樣便於我們觀察狀態修改後的變化。定時器的作用就是“隔一秒改一下時間”(下方有個錯別字,就不改了)
  • 最後就是在渲染的render方法中獲取相關狀態值進行使用了。該狀態最終用來控制字型顏色的變化。

  

下方就是上述程式碼執行的相關效果,從下方的效果中不難看出,沒個一秒文字的顏色會隨著狀態而修改。

  

 今天部落格就先到這兒,該做飯去了,下篇部落格會總結一個RN中常用的佈局方式。