在react native專案中，所有展示的介面，都可以看做是乙個元件（component）只是功能和邏輯上的複雜程度不同。每乙個是許許多多小的元件拼成的，每個小的元件也有自己對應的邏輯，不過他們都遵循同樣的**結構，由以下幾個部分組成
第一是包和其他元件引用部分，如下圖：
新版本的react native已經變成了如下形式：
第二部分是元件類的宣告，如圖：
新版形式：
此部分用於構造元件的狀態和具體的展示結構，利用react.createclass（）來例項化乙個react native元件物件，其中會包含元件的幾個重要的生命週期（下文會講到），其中render屬性對應的函式會返回一段jsx來表示該元件的結構和布局。該部分是乙個元件必不可少的地方，沒有這些內容，就無法構成乙個元件。
第三部分是該元件的樣式宣告，如圖：
新版形式：
該部分使用stylesheet.create來例項化樣式物件，其中的內容為json形式的react native樣式，該樣式**於css3，並將其欄位規範為標準的首字母小寫駝峰式命名，這些宣告的樣式可供開發者在構建元件的展示時（jsx**中）進行使用（直接寫入jsx也可，但影響可讀性）。
乙個react native元件的生命週期分為例項化、存在期和銷毀期，其中最常用的為例項化期，該時期即元件的構建、展示時期，需要開發者根據幾個函式的呼叫過程，控制好元件的展示和邏輯的處理。
（1）例項化期分為5個階段，每個階段以乙個函式來進行控制，具體如下：
getdefaultprops：顧名思義，這裡會初始化一些預設的屬性，通常會將固定的內容放在這個過程中進行初始化和賦值，乙個控制項可以利用this.props獲取在這裡初始化它的屬性，由於元件初始化後，再次使用該元件不會呼叫getdefaultprops函式，所以元件自己不可以自己修改props（即：props可認為是唯讀的），只可由其他元件呼叫它時在外部修改。
getinitialstate：這裡是對控制項的一些狀態進行初始化，由於該函式不同於getdefaultprops，在以後的過程中，會再次呼叫，所以可以將控制控制項的狀態的一些變數放在這裡初始化，如控制項上顯示的文字，可以通過this.state來獲取值，通過this.setstate來修改state值，修改方式如下：
1值得注意的是，一旦呼叫了this.setstate方法，控制項必將呼叫render方法，對控制項進行再次的渲染，不過，如果react框架會自動根據dom的狀態來判斷是否需要真正的渲染。function
() );
5 }
componentwillmount：可以通過字面意思看出，這個方法被呼叫時期是元件將要被載入在檢視上之前，功能比較少，即：render乙個元件前最後一次修改state的機會。
render：上面已經說過render是乙個元件必須有的方法，形式為乙個函式，並返回jsx或其他元件來構成dom，和android的xml布局、wpf的xaml布局類似，只能返回乙個頂級元素，即：
同時，在render函式中，只可通過this.state和this.props來訪問在之前函式中初始化的資料值。
componentdidmount：即呼叫了render方法後，元件載入成功並被成功渲染出來以後所執行的hook函式，一般會將網路請求等載入資料的操作，放在這個函式裡進行，來保證不會出現ui上的錯誤，如圖所示，_fetchdata利用了fetch api來非同步請求web api來載入商品資料：
（2）存在期主要是用來處理與使用者的互動，如：點選事件，都比較簡單，也不是很常用，具體有以下幾個過程：
componentwillreceiveprops：指父元素對元件的props或state進行了修改
shouldcomponentupdate：一般用於優化，可以返回false或true來控制是否進行渲染
componentwillupdate：元件重新整理前呼叫，類似componentwillmount
componentdidupdate：更新後的hook
（3）銷毀期，用於清理一些無用的內容，如：點選事件listener，只有乙個過程：componentwillunmount
總得來講，react native元件的生命週期，經歷了mount->update->unmount這三個大的過程，即從建立到銷毀的過程，如果借助android和ios的開發思想，那麼react native元件的生命週期就更容易理解了。那麼，我們構建乙個react native控制項也就能夠知道如何下手，如何控制和優化。經過一層一層的封裝和呼叫，乙個完整的react native應用也就構建出來了。
React Native 元件集合
1 display 該屬性用來指定元素是否為伸縮容器 flex inline flex flex用於產生塊級伸縮容器 inline flex用於產生行級伸縮容器 2 flexdirection 該屬性指定主軸方向 row row reverse column column reverse row 預...
ReactNative元件匯出
如果對rn開發有一定的了解的話，就會發現，reactnative提供的元件不能完全滿足開發的需求，就需要自定義一些元件，那麼如何匯出全域性的自定義元件呢？元件匯出有兩種形式 開發者一般使用預設元件匯出 首先在專案下面新建乙個資料夾rn design rn design就是乙個自己的元件庫類似於rea...
react native引導畫面元件
rn viewpager ios android react native material design android import from rn viewpager 引入必要依賴元件，其餘元件自行引入 style 必須flex 1 style 自定義右側頭部按鈕 style style 跳過...