以項目（業務GO）為例：
react-native-swiper 輪播（用在首頁的圖集輪播）
https://github.com/leecade/react-native-swiper
react-native-image-zoom-viewer 圖集查看（組件功能多，適合用於圖集文章和大圖查看）
均是第三方組件，安裝方法一樣，都需要在文件頂部引入，如：
import Swiper from 'react-native-swiper';
關於'react-native-swiper'的基本用法：
基礎屬性：
屬性 |
默認 |
類型 |
描述 |
horizontal |
true |
bool |
如果true，滾動視圖在一行中水平排列， 而不是垂直排列。 |
loop |
true |
bool |
設置為false禁用連續循環模式。 |
index |
0 |
number |
初始幻燈片索引(下標)。 |
showsButtons |
false |
bool |
設置為true使控制按鈕可見。 |
autoplay |
false |
bool |
設置為true啟用自動播放模式。 |
onIndexChanged |
（index）=> null |
func |
當用戶刷新時用新的索引(下標)調用 |
自定義基本樣式和內容
屬性 |
默認 |
類型 |
描述 |
width |
- |
number |
如果沒有指定默認 啟用全屏模式flex: 1。 |
height |
- |
number |
如果沒有指定默認 全屏模式flex: 1。 |
style |
{...} |
style |
請參閱源中的默認樣式。 |
loadMinimal |
false |
bool |
只載入當前索引幻燈片， loadMinimalSize幻燈片前后。 |
loadMinimalSize |
1 |
number |
看到 loadMinimal |
loadMinimalLoader |
<ActivityIndicator /> |
element |
幻燈片未加載時 顯示的自定義加載器 |
分頁
屬性 |
默認 |
類型 |
描述 |
showsPagination |
true |
bool |
設置為true 使分頁可見。 |
paginationStyle |
{...} |
style |
自定義樣式 將與默認樣式合並。 |
renderPagination |
- |
function |
三個參數， 可以顯示索引。 |
dot |
<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> |
element |
允許自定義點元素。 |
activeDot |
<View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> |
element |
允許自定義活動點元素。 |
dotStyle |
- |
object |
允許自定義活動點元素。 |
dotColor |
- |
string |
允許自定義活動點元素。 |
activeDotColor |
- |
string |
允許自定義活動點元素。 |
activeDotStyle |
- |
object |
允許自定義活動點元素。 |
自動播放
屬性 |
默認 |
類型 |
描述 |
autoplay |
true |
bool |
設置為true啟用自動播放模式。 |
autoplayTimeout |
2.5 |
number |
自動播放轉換之間的延遲（秒）。 |
autoplayDirection |
true |
bool |
循環方向控制。 |
控制按鈕
屬性 |
默認 |
Type |
Description |
showsButtons |
true |
bool |
是否顯示控制箭頭按鈕 |
buttonWrapperStyle |
{position: 'absolute', paddingHorizontal: 15, paddingVertical: 30, top: 70, left: 0, alignItems:'flex-start'} |
style |
定義默認箭頭按鈕的樣式 |
nextButton |
<Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>‹</Text> |
element |
自定義右箭頭按鈕樣式 |
prevButton |
<Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>›</Text> |
element |
自定義左箭頭按鈕樣式 |
以上基本就可以滿足對輪播組件的使用了，或許還有其他需求，那就只能再看看文檔介紹。
關於'react-native-image-zoom-viewer '基本用法：
而關於圖集組件的，還是沒有找到相關文檔，只能借助別人的咯：https://github.com/ascoders/react-native-image-viewer/blob/master/src/image-viewer.type.ts
不過還好，足夠我們簡單使用。唯一值得提出的便是，圖集中的圖片與下部的簡介應該怎樣連接起來，於是……
import ImageViewer from 'react-native-image-zoom-viewer';//引入圖集組件
可以移步這里：http://www.cnblogs.com/vipstone/p/7611676.html
