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）

 

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

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

　　

雖然本篇部落格使用的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

因為之前使用的另一個動態化的框架是用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即可。

　　

 

  

 

三、自定義元件（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中常用的佈局方式。

作者：青玉伏案 
出處：http://www.cnblogs.com/ludashi/ 

鄭州人流醫院

鄭州哪家醫院做人流好

鄭州哪家做人流好

鄭州哪家不孕不育醫院好