在 UIExploerer應用程序里面，加載了一個標準的React Native 的示例，并且允許您瀏覽所有支持的界面元素。 強烈推薦您去檢查包含在 UIExplorer 應用中的各種元素。 該應用同時也展示了很多的樣式選項以及交互。

由于各種不同的平臺之間，這些組件差別很大。所以當您使用React Native 做開發時，如何搭建各種React 的組件就顯得特別重要了。在使用 React 做網站開發時，我們經常會使用的一個混合的 React 組件：一些管理邏輯和他們的子控件，而其它的一些組件是通過渲染原始的標簽生成的。 如果您打算在React Native 復用這些代碼，分別維護這兩種不同類型的組件就很重要。 利用 React 組件渲染生成的 元素顯然是不能在Android平臺里面使用了。然而，對于封裝了聯合邏輯的組件都是可以被復用的。 因些，基于視圖的組件都是可以在不同的平臺之間交換使用的。

樣式化原生的視圖

網頁上，我們是通過使用CSS 來樣式化 React 的組件， 就象我們過去所處理的任何一種HTML 元素。 不管您喜不喜歡， CSS都是網站開發中必不可少的一部分。 React 通常不會影響到我們寫CSS 的方式。 相反他通過在行內直接樣式化使用讓 CSS的使用更加簡單， 同時基于 props 和 state 兩個參數動態創建類名， 但另一方面，React 組件在我們處理網頁的樣式時是不可預見的。

非網頁平臺有很多方法做布局和樣式。 我們在使用 React Native 時，感謝上帝，我們可以使用一個標準的方式來樣式化。 在 React 和宿主平臺之間的橋部分包含了做了很多修剪的 CSS 子集的使用。 這部分簡化了的CSS 布署主要依賴 flexbox 做布局規則，更關注于簡約，而不是全面的包含所有的CSS樣式規則。 不象網站， CSS 包含了不同平臺瀏覽器的各種規則， React Native 可以強制實行所支持的樣式的一貫性。 對于大多數的界面元素，您可以在 UIExplorer 應用程序中看到更多支持的樣式例子。

React Native  同時也堅持使用行內的樣式方式，這規則被JavaScript 的對象采用，而不象一般網頁的單獨的樣式表文件。 React 小組已經在使用 React 做為網站應用程序之時就強力鼓吹這種方式。 在移動端， 這方式感覺更加自然些。 如果您已經很熟悉使用React 的行內樣式表方式，那下面的語法對你來說一定不陌生。

// Define a style…

var style = {

backgroundColor: ‘white’,

fontSize: ‘16px’

}

React Native 也同時為我們提供一些工具幫助創建和擴展樣式對象，以幫助我們管理行內樣式的使用流程。 我們將晚點關注這些工具。

這種行內樣式是否看著讓您感到很怯？如果您有網頁開發的背景，不得不承認這和您以前的標準工作方式有很大不同。 在要給對象做樣式之時，和采用樣式表不同，您需要做一些思維方式的調整，改變您以往的寫樣式表的方式。 但，對于在React Native 的語境之下，這是很有用的切換。 我們也會在稍晚再討論樣式的最好練習以及工作流。只是當您看到這種使用方式的時候，盡量保持不吃驚就好。(11.17 7878)