在本章和后面的章節(jié)中，將通過具體的Demo來介紹相關(guān)內(nèi)容限匣。

Demo只介紹大體的用法。一些細(xì)節(jié)的東西，都在代碼注釋中詳細(xì)說明贮庞，感興趣的請(qǐng)下載代碼~下面是demo1--firstRNapp的頁面效果：

項(xiàng)目git地址：https://github.com/yujiesuperman/react-native-demo1

? ? ? ? Demo1完成了題目中包含的幾件事，布局的基礎(chǔ)物喷、樣式的控制遮斥、官方的Text組件和Image組件的應(yīng)用；利用屬性（Props）和狀態(tài)（state）傳遞數(shù)據(jù)尉辑；從網(wǎng)絡(luò)上Get到了數(shù)據(jù)和圖片；封裝了一個(gè)純Js的button組件隧魄，同時(shí)還講到了從GitHub引入第三方純JS組件的方法隘蝎。

下面先看下項(xiàng)目的目錄結(jié)構(gòu)：

? ? ? ?我們會(huì)發(fā)現(xiàn)相對(duì)于之前的demoRN項(xiàng)目多了一個(gè)src目錄，這個(gè)目錄是Rn項(xiàng)目的開發(fā)目錄狮含，在這里因?yàn)楣δ艿脑驎簳r(shí)只有一個(gè)組件component目錄，里面放著我們自己封裝的Button.js(一個(gè)按鈕几迄，在點(diǎn)擊后變灰色，等數(shù)據(jù)加載完后變綠色)府蛇。

（一）先從入口文件看起：

上圖的兩個(gè)import是固定寫法屿愚，不過第二個(gè)要把js中用到所有的組件涵蓋進(jìn)來；下面的兩句import一個(gè)是引入了自定義的組件穷遂，另一個(gè)是引入第三方的純js組件，第三方組件的地址是：

https://github.com/magicismight/react-native-root-toast

像這種純js的第三方組件使用方式非常簡(jiǎn)單蚪黑，cd到項(xiàng)目中中剩，直接

npm installreact-native-root-toast --save

備注：后面的save是將這個(gè)組件自動(dòng)添加到package.json賬本中，然后import第4句就可以直接Toast.show(“”)這樣調(diào)用了掠剑。純js的第三方組件一般是支持Android和ios兩端的；

1）下面類的構(gòu)造中使用了兩個(gè)概念：

①props（屬性）：大多數(shù)組件在創(chuàng)建時(shí)就可以使用各種參數(shù)來進(jìn)行定制朴译。用于定制的這些參數(shù)就稱為props（屬性）。

說的通俗點(diǎn)属铁，就是在別人調(diào)用你的時(shí)候，傳給你的參數(shù)盯拱，你可以通過this.props.屬性名這樣拿到喇肋，這是調(diào)用我們button的時(shí)候傳過來的3個(gè)屬性：

這是使用的時(shí)候：

獲取到的text和bgcolor變量

②對(duì)于需要改變的數(shù)據(jù)，我們需要使用state甚侣。一般來說间学，你需要在constructor中初始化state印荔。給或者不給state一個(gè)初始值详羡，然后在網(wǎng)絡(luò)數(shù)據(jù)加載完后，更新state实柠。Rn有這樣一種世界觀，改變狀態(tài)窒盐，就能改變視圖！

2）網(wǎng)絡(luò)請(qǐng)求

這是網(wǎng)絡(luò)請(qǐng)求的代碼部分炕横，除了可以使用Fetch外葡粒，還支持websocket和ajax。詳見：http://reactnative.cn/docs/0.41/network.html#content

備注：默認(rèn)情況下嗽交，iOS會(huì)阻止所有非HTTPS的請(qǐng)求。如果你請(qǐng)求的接口是http協(xié)議腔寡，那么首先需要添加一個(gè)App Transport Securty的例外，如下：

3）樣式布局基礎(chǔ)

render（）方法中返回一些用于渲染結(jié)構(gòu)的JSX語句，就是頁面長(zhǎng)啥樣主要看這~

備注：可以看到糯彬，方法內(nèi)注釋的方法，和方法外注釋的方法

這里有一些基礎(chǔ)的標(biāo)簽的使用比如<Text>撩扒、<Image>吨些、<View>

還有樣式的定義StyleSheet.create 以及使用的方式，（一個(gè)組件使用兩種樣式的方法）泉手，在樣式中也有布局的基礎(chǔ)屬性（Flexbox）：一般來說，使用flexDirection斩萌、alignItems和justifyContent三個(gè)樣式屬性就已經(jīng)能滿足大多數(shù)布局需求：

①在組件的style中指定flexDirection可以決定布局的主軸。子元素是應(yīng)該沿著水平軸(row)方向排列颊郎，還是沿著豎直軸(column)方向排列呢？默認(rèn)值是豎直軸(column)方向姆吭。

②在組件的style中指定justifyContent可以決定其子元素沿著主軸的排列方式。子元素是應(yīng)該靠近主軸的起始端還是末尾段分布呢检眯？亦或應(yīng)該均勻分布？

③在組件的style中指定alignItems可以決定其子元素沿著次軸（與主軸垂直的軸轰传，比如若主軸方向?yàn)閞ow瘪撇，則次軸方向?yàn)閏olumn）的排列方式。子元素是應(yīng)該靠近次軸的起始端還是末尾段分布呢倔既？亦或應(yīng)該均勻分布？

詳細(xì)學(xué)習(xí)的話就需要去官方文檔或者Rn中文網(wǎng)上認(rèn)真看了

（二）下面我們來看component中的Button.js

我們發(fā)現(xiàn)導(dǎo)入了一個(gè)TouchableOpacity組件佩谣，本組件用于封裝視圖实蓬，使其可以正確響應(yīng)觸摸操作。當(dāng)按下的時(shí)候，封裝的視圖的不透明度會(huì)降低。這個(gè)過程并不會(huì)真正改變視圖層級(jí)。

它的點(diǎn)擊事件觸發(fā)了自定義的方法腾窝，這種自定義的方法如果想使用this.XXX就必須要進(jìn)行綁定居砖，注釋里詳細(xì)說明了兩種綁定的方式，

備注：注釋里有很多細(xì)節(jié)的理解的東西奏候，在這里就不一一說了，可以參考（看到這里還沒繞行的大神就將就著看吧）

下面請(qǐng)回顧三個(gè)位置的代碼：一個(gè)是button.js,一個(gè)是入口的fetch網(wǎng)絡(luò)請(qǐng)求處暇榴，另一個(gè)是入口調(diào)用<Button>的位置；

這里由于fetch是一個(gè)異步的請(qǐng)求蔼紧，需要實(shí)現(xiàn)的效果是在點(diǎn)擊后首先將自定義Button置灰，然后待請(qǐng)求結(jié)束數(shù)據(jù)正確后奸例，將Button重新變綠，重置為可點(diǎn)擊〔榈酰現(xiàn)在置灰和置綠的方法全都在Button.js中，想要在入口（index.android.js）中的fetch的回調(diào)函數(shù) 中調(diào)用也有兩種方式宋列，：

①在調(diào)用Button組件的位置處添加ref={“XX”}，這樣炼杖，就可以在fetch的地方使用this.refs.XX找到真正的Button組件盗迟，然后再.enable（）。

②另一種就是類似于Android Native開發(fā)的回調(diào)了罚缕，也就是本Demo實(shí)現(xiàn)的方法，將enable方法傳出去邮弹。Demo的入口文件將fetch方法通過props參數(shù)傳給Button，Button的點(diǎn)擊事件觸發(fā)后员帮，拿到并執(zhí)行fetch方法，同時(shí)將enable方法作為方法參數(shù)傳出去；這樣氯材，就能在fetch中調(diào)到enable了

備注：并不是一定要為state初始化一個(gè)值，本demo因?yàn)槿肟谖募膕tate在沒請(qǐng)求網(wǎng)絡(luò)的時(shí)候就需要展示一個(gè)默認(rèn)值（render中的內(nèi)容在頁面一加載時(shí)就會(huì)調(diào)用）袋毙，所以才在構(gòu)造中為它進(jìn)行了初始化，否則報(bào)錯(cuò)听盖。

總結(jié)：

第一個(gè)Demo的介紹到此結(jié)束胀溺，類似常用的官方組件Listview和Scrollview等就不再詳細(xì)介紹了皆看，在這里只把目錄提到的內(nèi)容做個(gè)展示，目的就是讓你入個(gè)門腰吟，能跟別人逼逼兩句react native，想具體學(xué)習(xí)還請(qǐng)學(xué)習(xí)官方文檔嫉称，或者Rn中文網(wǎng)上學(xué)習(xí)。