第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="組件列表" />

二、如何正確運(yùn)行UI組件Example

我們可以到react-native的github項(xiàng)目地址找到example,地址是https://github.com/facebook/react-native/tree/master/Examples/UIExplorer。下載react-native的代碼庫，將UIExplorer目錄下的所有文件拷貝到你新建的項(xiàng)目中。其實(shí)UIExplorerApp.js就是整個(gè)項(xiàng)目的啟動(dòng)的文件。有兩種方式可以啟動(dòng)項(xiàng)目：

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

2、第二種就是將UIExplorerApp.js里面的代碼復(fù)制到index.ios.js中，此時(shí)，注意：
AppRegistry.registerComponent('HelloWorld', () => UIExplorerApp);
HelloWorld是你的項(xiàng)目名稱，如果已經(jīng)啟動(dòng)項(xiàng)目，需要確保這個(gè)名稱一致。

項(xiàng)目啟動(dòng)后的界面如下，你就可改改UI組件看效果了。

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

三、活動(dòng)指示器組件

其實(shí)，每個(gè)組件如何使用，可以到demo中去看代碼。這里做簡單的介紹.活動(dòng)指示器組件可以做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="組件" />

七、導(dǎo)航器組件

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

八、導(dǎo)航組件

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運(yùn)行和學(xué)習(xí)，其實(shí)就是相當(dāng)于html標(biāo)簽，具有某種功能，習(xí)慣就好。