1. 程式人生 > >[學習] React Native Swiper 滑動輪播圖套件 « 關於網路那些事...

[學習] 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 相關錯誤等


如果你喜歡我們的文章內容,請在這裡按個讚