開篇呢，先給大家問個好，今天是中秋節，祝大家中秋節快樂！！雖然是中秋節，但是木有回家還是總結一下知識點寫寫部落格吧，想着昨天總結一下的，但是昨天和幾個同學小聚了一下，酒逢知己總是千杯少呢，喝的微醺不适合寫東西，是以就留到今天總結了。因為這段時間在工作中陸陸續續的接觸到了一些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自行安裝）
然後可以把node的源更新成taobao的鏡像，這樣通路速度會快一些。
裝完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/
本文版權歸作者和共部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。
如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。
收履歷：某網際網路公司，招聘iOS/Android靠譜工程師，入職後，可内部聯系樓主，有小禮品贈送，有意者可郵箱投遞履歷：[email protected]