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

React-Native入門指南

github:https://github.com/vczero/react-native-lession

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

最近一個星期寫的文章以下，連接是github page的，其實也能夠在系列博客找到相應文章：

• Lession1: Hello React-Native
• Lession2: 認識代碼結構
• Lession3: css和佈局
• Lession4: 學會React-Native佈局（一）
• Lession5: 學會React-Native佈局(二)
• Lession6: UI組件
• Lession7: JSX在React-Native中的應用

還有幾篇會時刻更新：

• Lession8: 本身動手寫組件
• Lession9: 模塊化開發
• Lession10: 搭建項目架構
• Lession11: 源碼分析

第5篇UI組件

1、目前React-Native支持的組件

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

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

咱們能夠到react-native的github項目地址找到example,地址是https://github.com/facebook/react-native/tree/master/Examples/UIExplorer。下載react-native的代碼庫，將UIExplorer目錄下的全部文件拷貝到你新建的項目中。其實UIExplorerApp.js就是整個項目的啓動的文件。有兩種方式能夠啓動項目：

一、第一種是修改jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

二、第二種就是將UIExplorerApp.js裏面的代碼複製到index.ios.js中，此時，注意：
AppRegistry.registerComponent('HelloWorld', () => UIExplorerApp);
HelloWorld是你的項目名稱，若是已經啓動項目，須要確保這個名稱一致。

項目啓動後的界面以下，你就可改改UI組件看效果了。

3、活動指示器組件

其實，每一個組件如何使用，能夠到demo中去看代碼。這裏作簡單的介紹.活動指示器組件能夠作loading,下拉刷新等

4、日曆組件

5、圖片組件

6、列表組件

7、導航器組件

8、導航組件

9、開關組件

其他組件能夠查看demo運行和學習，其實就是至關於html標籤，具備某種功能，習慣就好。