React-Native入門指南（五）——UI組件

標籤：

React-Native入門指南github:https://github.com/vczero/react-native-lession

React-Native:用JavaScript開發你的原生應用，釋放Native的UI體驗，體驗 Hybird開發效率。

最近一個星期寫的文章如下：

• 第1篇hello react-native
• 第2篇認識代碼結構
• 第3篇css和布局
• 第4篇學會react-native布局
• 第5篇ui組件

還有幾篇需要這這周完成（這塊會時刻更新）：

• 第6篇JSX文法
• 第7篇自己動手寫組件
• 第8篇模組化開發
• 第10篇搭建項目架構
• 第11篇源碼分析

第5篇UI組件一、目前React-Native支援的組件

在facebook React-native的官網可以看到目前支援的組件如下：https://facebook.github.io/react-native/docs/getting-started.html#content

二、如何正確運行UI組件Example

我們可以到react-native的github項目地址找到example,地址是https://github.com/facebook/react-native/tree/master/Examples/UIExplorer。下載react-native的程式碼程式庫，將UIExplorer目錄下的所有檔案拷貝到你建立的項目中。其實UIExplorerApp.js就是整個項目的啟動的檔案。有兩種方式可以啟動項目：1、第一種是修改jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];2、第二種就是將UIExplorerApp.js裡面的代碼複製到index.ios.js中，此時，注意：AppRegistry.registerComponent(‘HelloWorld‘, () => UIExplorerApp);HelloWorld是你的項目名稱，如果已經啟動項目，需要確保這個名稱一致。項目啟動後的介面如下，你就可改改UI組件看效果了。

三、活動指標組件

其實，每個組件如何使用，可以到demo中去看代碼。這裡做簡單的介紹.活動指標組件可以做loading,下拉重新整理等

四、行事曆群組件

五、圖片組件

六、列表組件

七、導航器組件

八、導航組件

九、開關組件

其餘組件可以查看demo運行和學習，其實就是相當於html標籤，具有某種功能，習慣就好。

React-Native入門指南（五）——UI組件