開篇呢，先給大家問個(gè)好，今天是中秋節(jié)，祝大家中秋節(jié)快樂！！雖然是中秋節(jié)，但是木有回家還是總結(jié)一下知識(shí)點(diǎn)寫寫博客吧，想著昨天總結(jié)一下的，但是昨天和幾個(gè)同學(xué)小聚了一下，酒逢知己總是千杯少呢，喝的微醺不適合寫東西，所以就留到今天總結(jié)了。因?yàn)檫@段時(shí)間在工作中陸陸續(xù)續(xù)的接觸到了一些RN開發(fā)的東西，還是需要總結(jié)一下的。今天只是個(gè)開篇，接下來還會(huì)有陸陸續(xù)續(xù)的關(guān)于RN開發(fā)的總結(jié)，今天主要是環(huán)境搭建、簡(jiǎn)單的組件封裝、Props和State的介紹，稍后還會(huì)更新布局、動(dòng)畫等一些開發(fā)中常用的東西。

雖然RN沒有Release版、雖然Airbnb放棄了RN、雖然Facebook正在重構(gòu)RN, 但是RN還是動(dòng)態(tài)化比較好的選擇方案的，還是要好好的搞一下RN的，當(dāng)然也是工作中需要。既然要搞，就得認(rèn)真呢，這篇是關(guān)于RN的第一篇博客，后續(xù)還會(huì)有其他關(guān)于RN的博客跟進(jìn)的，也好在自己的學(xué)習(xí)歷程中打個(gè)Tag。今天博客比較簡(jiǎn)單，是RN入門級(jí)別的，當(dāng)然進(jìn)階的東西目前還沒有接觸過，等深入后再展開來記錄吧。

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

?

一、RN下的Hello World

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

1、安裝Node和VSCode

首先我們來搞一下Hello World前的準(zhǔn)備工作，使用RN時(shí)，Node環(huán)境是必不可少的，如果你沒有Node環(huán)境可以使用brew進(jìn)行安裝。（如果你還沒安裝Homebrew, 那么請(qǐng)Google自行安裝）

brew install node

然后可以把node的源更新成taobao的鏡像，這樣訪問速度會(huì)快一些。

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

?

裝完Node后，然后就是選擇安裝一個(gè)開發(fā)RN的IDE了，當(dāng)然你如果夠強(qiáng)大，完全可以用記事本來編寫RN的代碼。當(dāng)然用記事本是開玩笑的，可以用Sublime Text、Visual Studio Code等，如果比較土壕的程序員呢，你可以支持一下正版的Webstorm。當(dāng)然想我這樣“溫飽都成問題”的程序猿，就只能用免費(fèi)的VSCode了。

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

　　

雖然本篇博客使用的VScode，但是平時(shí)開發(fā)中用WebStorm感覺還是挺爽的。

?

2、安裝 exp

直接在模擬器上調(diào)試，依賴于exp這個(gè)App，下方這個(gè)命令就是安裝exp。安裝完后，會(huì)在模擬器上看到Expo這個(gè)App, 下方我們就會(huì)用到這個(gè)Expo。

npm install exp --global

?　　?

??

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

安裝完Node后，使用Node的npm把create-react-native-app這個(gè)包裝一下，可以快速的創(chuàng)建一個(gè)RN-Project。

　　

然后使用create-react-native-app可以創(chuàng)建一個(gè)RN工程了，下方創(chuàng)建了一個(gè)名為MyFirstRNProject的RN工程。

　　

?

創(chuàng)建完相關(guān)的RN工程成功后會(huì)有相關(guān)的提示，我們還是按照其提示的倆，使用 yarn start 來啟動(dòng)工程。

　　

?

啟動(dòng)后，會(huì)讓你選擇相關(guān)的運(yùn)行方式，因?yàn)楸酒┛褪窃趇OS環(huán)境下做的Demo，所有就直接選擇 i 即可。

　　

?

?選擇 i 后，就會(huì)啟動(dòng)模擬器中的Expo?？梢杂?command + D 來調(diào)用和隱藏開發(fā)調(diào)試面板。然后就會(huì)看到右邊紅框找那個(gè)的默認(rèn)的文案。

　　?

?

我們可以將默認(rèn)的文案改一下，然后修改一下樣式，添加上我們的Hello World保存即可。因?yàn)槟J(rèn)Live Reload是打開的，所以當(dāng)相關(guān)的文件被修改后，模擬器上的工程會(huì)自動(dòng)Reload加載改動(dòng)后的效果，具體如下所示：

　　　　

?

在上面的代碼中我們還需注意到下方定義了一個(gè) styles 的常量，該常量是我們需要的樣式對(duì)象。在RN中可以使用 StylesSheet.create()方法來創(chuàng)建我們需要的樣式。改樣式的定義規(guī)則與Web前端中的CSS差不多，使用方式頁(yè)非常的相似。下方我們還會(huì)定義其他的樣式表，稍后會(huì)介紹到。

?

?

二、使用TypeScript來開發(fā)RN

因?yàn)橹笆褂玫牧硪粋€(gè)動(dòng)態(tài)化的框架是用TypeScript來開發(fā)的，想在RN中也用TypeScript來開發(fā)，當(dāng)然其默認(rèn)的js語言的。在RN中支持TS開發(fā)，有相關(guān)的文檔（https://github.com/Microsoft/TypeScript-React-Native-Starter）

　　

?

然后把工程中的App.js替換成App.tsx即可。（純ts文件使用.ts來命名，有JSX的TS文件則使用tsx來做后綴），改完再次運(yùn)行我們的Hello World即可。

　　

?

??

?

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

實(shí)現(xiàn)完HelloWorld后我們來看一下RN中組件封裝的姿勢(shì)，下方會(huì)封裝一個(gè)HelloWorld的組件，然后在該組件的基礎(chǔ)上看一下RN中Props和State的使用姿勢(shì)。

1、HelloWorld組件封裝

在RN中封裝的組件都需要繼承自 Component 類，然后在該類中正常的去添加相關(guān)布局和相關(guān)邏輯即可。下方我們將上述的HelloWorld進(jìn)行了提取，創(chuàng)建了一個(gè)HelloWorld類，該類繼承自React中的Component。然后在render()方法中通過JSX來添加需要渲染的各種組件，當(dāng)然在我們的HelloWorld中，我們只用到了Text這個(gè)組件來展示文字。

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

　　

?

2、Props - 屬性

屬性，說白了就是一個(gè)組件負(fù)責(zé)接送外部參數(shù)的一個(gè)東西，類似于一個(gè)方法的參數(shù)。當(dāng)然，如果你使用一個(gè)Function來定義一個(gè)組件的話，那么這個(gè)Props就是方法的參數(shù)。

在上面的HelloWorld的示例中，我們其實(shí)已經(jīng)使用到了Props這個(gè)東西，只不過是系統(tǒng)自帶的，比如上面為HelloWorld指定的 style 就是一個(gè)props, 該props傳入的是一個(gè)樣式對(duì)象。我們從Web前端的角度來說，屬性這個(gè)東西應(yīng)該是比較好理解的，div后邊跟的key 和 value, 后邊這個(gè)value就是相關(guān)key的屬性。接下來我們將要介紹如何給自定義的組件添加特定的屬性。

?　　

?

下方我們寫了一個(gè)HelloWorld的組件，該組件繼承與React中的Component，然后在render中渲染了一些組件，其中的Text是從屬性Props中取的，從下方代碼中看出，直接從Props中取相應(yīng)的Key是可以取到的，不過強(qiáng)取值的話，會(huì)標(biāo)紅，會(huì)提示相關(guān)的熟悉在Props中不存在。稍后會(huì)解決該問題。

　　

?

下方就是我們寫的Hello Props組件，組件中的相關(guān)內(nèi)容時(shí)通過Props中的相關(guān)key-value來傳過來的。換句話說，Props就是一個(gè)傳值的JSON串。

　　

?

通常我們?cè)陂_發(fā)中會(huì)為Props定義相關(guān)的類型，來聲明Props中都有哪些東西，下方就是我們?yōu)樯鲜龅腍elloWorld補(bǔ)的Props的類型，然后通過協(xié)議的形式指定給HelloWorld組件。從下代碼我們看出，在Props類型后邊還有一個(gè)null的類型，該類型是聲明State的類型使用的。該處我們沒有相關(guān)的狀態(tài)，就暫且不指定，下方使用到的地方我們會(huì)給出相關(guān)的狀態(tài)值。

添加完相關(guān)的類型聲明后，之前下方標(biāo)紅的地方就不存在了。

　　

?

??

3、State-狀態(tài)

狀態(tài)對(duì)應(yīng)RN來說有著舉足輕重的地位，整個(gè)RN的頁(yè)面或者一個(gè)小的RN組件都可以看做是一個(gè)狀態(tài)機(jī)，該狀態(tài)機(jī)就是通過這個(gè)State來管理的。State中可以存放各種狀態(tài)以及各種值，當(dāng)這些值或者狀態(tài)被修改時(shí)，那么這個(gè)組件節(jié)點(diǎn)就會(huì)被重新渲染，也就是更新頁(yè)面或者組件。下方我們就為我們的HelloWorld添加上相關(guān)的State狀態(tài)，然后通過該狀態(tài)所對(duì)應(yīng)的值做一些事情。

• 聲明State類型：首先我們像聲明之前的Props類型一樣聲明了一個(gè)HelloWorldStateType的狀態(tài)類型，然后HelloWorld組件中狀態(tài)類型的位置設(shè)置了該類型。改類型中有一個(gè)屬性，從狀態(tài)屬性我們不難看出是用來控制某個(gè)空是否展示白色的。
• 初始State：我們指定狀態(tài)類型后，該狀態(tài)還需要一個(gè)初始狀態(tài)，于是在構(gòu)造器中對(duì)該狀態(tài)進(jìn)行了初始化。
• 定時(shí)器修改狀態(tài)：然后我們用定義了一個(gè)定時(shí)器，使用定時(shí)器來定時(shí)的修改狀態(tài)的值，這樣便于我們觀察狀態(tài)修改后的變化。定時(shí)器的作用就是“隔一秒改一下時(shí)間”（下方有個(gè)錯(cuò)別字，就不改了）
• 最后就是在渲染的render方法中獲取相關(guān)狀態(tài)值進(jìn)行使用了。該狀態(tài)最終用來控制字體顏色的變化。

　　

?

下方就是上述代碼運(yùn)行的相關(guān)效果，從下方的效果中不難看出，沒個(gè)一秒文字的顏色會(huì)隨著狀態(tài)而修改。

　　

?

?今天博客就先到這兒，該做飯去了，下篇博客會(huì)總結(jié)一個(gè)RN中常用的布局方式。

總結(jié)

以上是生活随笔為你收集整理的ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。