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

開篇呢，先給你們問個好，今天是中秋節，祝你們中秋節快樂！！雖然是中秋節，可是木有回家仍是總結一下知識點寫寫博客吧，想着昨天總結一下的，可是昨天和幾個同窗小聚了一下，酒逢知己老是千杯少呢，喝的微醺不適合寫東西，因此就留到今天總結了。由於這段時間在工做中陸陸續續的接觸到了一些RN開發的東西，仍是須要總結一下的。今天只是個開篇，接下來還會有陸陸續續的關於RN開發的總結，今天主要是環境搭建、簡單的組件封裝、Props和State的介紹，稍後還會更新佈局、動畫等一些開發中經常使用的東西。

雖然RN沒有Release版、雖然Airbnb放棄了RN、雖然Facebook正在重構RN, 可是RN仍是動態化比較好的選擇方案的，仍是要好好的搞一下RN的，固然也是工做中須要。既然要搞，就得認真呢，這篇是關於RN的第一篇博客，後續還會有其餘關於RN的博客跟進的，也好在本身的學習歷程中打個Tag。今天博客比較簡單，是RN入門級別的，固然進階的東西目前尚未接觸過，等深刻後再展開來記錄吧。

RN官方文檔（https://facebook.github.io/react-native/docs/getting-started）

 

1、RN下的Hello World

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

一、安裝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了。

官方地址：https://code.visualstudio.com/

　　

雖然本篇博客使用的VScode，可是平時開發中用WebStorm感受仍是挺爽的。

 

二、安裝 exp

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

npm install exp --global

 　　 

  

三、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差很少，使用方式頁很是的類似。下方咱們還會定義其餘的樣式表，稍後會介紹到。

 

 

2、使用TypeScript來開發RN

由於以前使用的另外一個動態化的框架是用TypeScript來開發的，想在RN中也用TypeScript來開發，固然其默認的js語言的。在RN中支持TS開發，有相關的文檔（https://github.com/Microsoft/TypeScript-React-Native-Starter）

　　

 

而後把工程中的App.js替換成App.tsx便可。（純ts文件使用.ts來命名，有JSX的TS文件則使用tsx來作後綴），改完再次運行咱們的Hello World便可。

　　

 

  

 

3、自定義組件（Componet）、Props以及State

實現完HelloWorld後咱們來看一下RN中組件封裝的姿式，下方會封裝一個HelloWorld的組件，而後在該組件的基礎上看一下RN中Props和State的使用姿式。

一、HelloWorld組件封裝

在RN中封裝的組件都須要繼承自 Component 類，而後在該類中正常的去添加相關佈局和相關邏輯便可。下方咱們將上述的HelloWorld進行了提取，建立了一個HelloWorld類，該類繼承自React中的Component。而後在render()方法中經過JSX來添加須要渲染的各類組件，固然在咱們的HelloWorld中，咱們只用到了Text這個組件來展現文字。

封裝的組件的使用姿式與RN提供組件的使用姿式是同樣的，都是經過JSX的語法來引入使用的。下方 <HelloWorld /> 就是咱們封裝組件HelloWorld的使用姿式。

　　

 

二、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的類型使用的。該處咱們沒有相關的狀態，就暫且不指定，下方使用到的地方咱們會給出相關的狀態值。

添加完相關的類型聲明後，以前下方標紅的地方就不存在了。

　　

 

  

三、State-狀態

狀態對應RN來講有着舉足輕重的地位，整個RN的頁面或者一個小的RN組件均可以看作是一個狀態機，該狀態機就是經過這個State來管理的。State中能夠存放各類狀態以及各類值，當這些值或者狀態被修改時，那麼這個組件節點就會被從新渲染，也就是更新頁面或者組件。下方咱們就爲咱們的HelloWorld添加上相關的State狀態，而後經過該狀態所對應的值作一些事情。

• 聲明State類型：首先咱們像聲明以前的Props類型同樣聲明瞭一個HelloWorldStateType的狀態類型，而後HelloWorld組件中狀態類型的位置設置了該類型。改類型中有一個屬性，從狀態屬性咱們不難看出是用來控制某個空是否展現白色的。
• 初始State：咱們指定狀態類型後，該狀態還須要一個初始狀態，因而在構造器中對該狀態進行了初始化。
• 定時器修改狀態：而後咱們用定義了一個定時器，使用定時器來定時的修改狀態的值，這樣便於咱們觀察狀態修改後的變化。定時器的做用就是「隔一秒改一下時間」（下方有個錯別字，就不改了）
• 最後就是在渲染的render方法中獲取相關狀態值進行使用了。該狀態最終用來控制字體顏色的變化。

　　

 

下方就是上述代碼運行的相關效果，從下方的效果中不難看出，沒個一秒文字的顏色會隨着狀態而修改。

　　

 

 今天博客就先到這兒，該作飯去了，下篇博客會總結一個RN中經常使用的佈局方式。