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中常用的布局方式。
總結
以上是生活随笔為你收集整理的ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android存储路径你了解多少？
- 下一篇： 实践 | Kylin在滴滴OLAP引擎中