react-native-swiper的github地址与帆。該組件同時支持android和iOS。

別人的文章仇奶，找時間總結(jié)下
https://blog.csdn.net/teagreen_red/article/details/78116638

react-native-swiper組件設置高度陡蝇？

react native 使用react-native-swiper践樱，swiper設置了高度翰灾，總是會占滿全屏缕粹，通過各種嘗試，找到解決辦法：
在Swiper外添加View標簽纸淮，終于正常顯示

1. 先安裝react-native-swiper

npm i react-native-swiper --save

查看：npm view react-native-swiper
刪除：npm rm react-native-swiper --save

2. 導入Swiper組件

import Swiper from 'react-native-swiper';

轉(zhuǎn)載過來的案例（親測好使）：

image.png

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

const styles =StyleSheet.create( {
    wrapper: {
    }, //整體樣式
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9bebe5'
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#e3b1e5'
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#90d985'
    },
    text: {
        color: '#ff6fa3',
        fontSize: 30,
        fontWeight: 'bold'
    }
});

export default class HomePage extends Component{
    render(){
        return(
            <Swiper style={styles.wrapper}
                    removeClippedSubviews={false}
                    showsButtons={true}         //顯示控制按鈕
                    loop={true}                    //如果設置為false平斩，那么滑動到最后一張時，再次滑動將不會滑到第一張圖片咽块。
                    autoplay={true}                //自動輪播
                    autoplayTimeout={3}          //每隔3秒切換

                    dot={<View style={{           //未選中的圓點樣式
                        backgroundColor: 'rgba(0,0,0,0.2)',
                        width: 18,
                        height: 18,
                        borderRadius: 4,
                        marginLeft: 10,
                        marginRight: 9,
                        marginTop: 9,
                        marginBottom: 9,
                    }}/>}
                    activeDot={<View style={{    //選中的圓點樣式
                        backgroundColor: '#83ffcf',
                        width: 18,
                        height: 18,
                        borderRadius: 4,
                        marginLeft: 10,
                        marginRight: 9,
                        marginTop: 9,
                        marginBottom: 9,
                    }}/>}

            >
                <View style={styles.slide1}>
                    <Text style={styles.text}>青衣</Text>
                </View>
                <View style={styles.slide2}>
                    <Text style={styles.text}>冷秋</Text>
                </View>
                <View style={styles.slide3}>
                    <Text style={styles.text}>聽雨</Text>
                </View>
            </Swiper>
        )
    }
};

基本屬性

屬性 默認 類型 描述
horizontal true bool 如果為true，內(nèi)容往水平方向滾動
loop true bool 如果為false侈沪，當滾動到最后一張時揭璃，繼續(xù)滾動無法回到第一張（即不可循環(huán)）
index 0 number 設置初始頁面的索引
showsButtons false bool 如果為true，顯示左右箭頭按鈕
autoplay false bool 設置是否自動切換
onIndexChanged (index) => null func 當用戶滑動頁面到新的頁面時觸發(fā)調(diào)用
自定義樣式
屬性 默認 類型 描述
width - number 如果未設置亭罪，則默認flex:1全屏顯示
height - number 如果未設置塘辅，則默認flex:1全屏顯示
style {…} style 設置頁面樣式
loadMinimal false bool 是否進行預加載
loadMinimalSize 1 number 預加載的數(shù)量
loadMinimalLoader element 自定義預加載的樣式
Pagination分頁
屬性 默認 類型 描述
showsPagination true bool 設置是否顯示分頁器（通常為頁面下面的小圓點）
paginationStyle {…} style 設置分頁器的樣式
renderPagination - function 通過 (index, total, context) 這三個參數(shù)控制分頁器渲染, 具體為(this.state.index / this.state.total / this)，例如分頁器渲染為數(shù)字而不是小圓點皆撩。
dot element 可以自定義圓點元素
activeDot element 可以自定義當前選中圓點元素
dotStyle {…} style 可以自定義圓點樣式
activeDot {…} style 可以自定義當前選中圓點樣式
dotColor - string 設置圓點顏色
activeDotColor - string 設置當前選中圓點顏色
autoPlay自動切換
屬性 默認 類型 描述
autoplay true boolean 設置是否自動切換
autoplayTimeout 2.5 number 延遲時間（秒)
autoplayDirection true boolean 設置循環(huán)方向
控制按鈕
屬性 默認 類型 描述
showsButtons true bool 是否顯示左右控制箭頭按鈕
buttonWrapperStyle {position: ‘a(chǎn)bsolute’, paddingHorizontal: 15, paddingVertical: 30, top: 70, left: 0, alignItems:’flex-start’} style 設置默認箭頭按鈕的樣式
nextButton ? element 自定義右箭頭按鈕樣式
prevButton ? element 自定義左箭頭按鈕樣式
根據(jù)上面各屬性的介紹，在前面引導頁的基礎(chǔ)上哲银，隱藏左右箭頭按鈕扛吞，設置自動播放，調(diào)整頁面的大小荆责，即可實現(xiàn)廣告欄的效果滥比。

作者：MrOnion0603
來源：CSDN
原文：https://blog.csdn.net/teagreen_red/article/details/78116638
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接做院！

原本文轉(zhuǎn)載地址

GitHub 文檔 粘貼下來的案例盲泛，會報錯："Swiper 重復"

image.png