關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

[學習] React Native Swiper 滑動輪播圖套件

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

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 相關錯誤等


如果這篇文章對你有幫助,請在這裡點個讚



最新文章推薦