推薦一款由 leecade 所發布的 react native swiper 套件，目前版本可以同時支援 iOS 及 Android，並且可以自定義樣式

React Native Swiper 滑動輪播圖套件

expo 預覽專案

如果你使用expo 工具來開發，可以掃描下方QR Code 檢視專案範例

安裝

npm install react-native-swiper --save

---or----

yarn add react-native-swiper

使用

import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import Swiper from 'react-native-swiper'

//[MyAppScreen]
const MyAppScreen = () => (
  <View style={{flex:1}}>
    <Swiper style={styles.wrapper} showsButtons>
      <View style={styles.slide1}>
      	<Text style={styles.text}>Swiper A</Text>
      </View>
      <View style={styles.slide2}>
      	<Text style={styles.text}>Swiper B</Text>
      </View>
      <View style={styles.slide3}>
      	<Text style={styles.text}>Swiper C</Text>
      </View>
    </Swiper>
    <ScrollView style={{paddingBottom:20, paddingTop:30}}>
        <Text>React Native Swiper Demo</Text>
    </ScrollView>
  </View>
);

export default MyAppScreen;

const styles = StyleSheet.create({
  wrapper: {
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB'
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5'
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  }
});

屬性

..陸續補充

注意事項

這個輪播套件值得留意的是，在Android 仍無法全面支援所有的功能， 例如，高度設定有問題，以及horizontal={false} 在Android不會切換成垂直輪播等 另外，在Android預設安裝會發生 font 相關錯誤等