React-Native入門指南

第5篇UI組件

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

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

http://wiki.jikexueyuan.com/project/react-native-lesson/images/5_1.png" alt="組件列表" />

二、如何正確運行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是你的項目名稱，如果已經(jīng)啟動項目，需要確保這個名稱一致。

項目啟動后的界面如下，你就可改改UI組件看效果了。

http://wiki.jikexueyuan.com/project/react-native-lesson/images/5_2.png" alt="組件列表" />

三、活動指示器組件

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

http://wiki.jikexueyuan.com/project/react-native-lesson/images/5_3.png" alt="組件" />

四、日歷組件

http://wiki.jikexueyuan.com/project/react-native-lesson/images/5_4.png" alt="組件" />

五、圖片組件

http://wiki.jikexueyuan.com/project/react-native-lesson/images/5_5.png" alt="組件" />

六、列表組件

http://wiki.jikexueyuan.com/project/react-native-lesson/images/5_6.png" alt="組件" />

七、導航器組件

http://wiki.jikexueyuan.com/project/react-native-lesson/images/5_7.png" alt="組件" />

八、導航組件

http://wiki.jikexueyuan.com/project/react-native-lesson/images/5_8.png" alt="組件" />

九、開關(guān)組件

http://wiki.jikexueyuan.com/project/react-native-lesson/images/5_9.png" alt="組件" />

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