注意：未經允許不可私自轉載，違者必究

React Native官方文件：https://reactnative.cn/docs/getting-started/

react-native-swiper官方教程：https://github.com/leecade/react-native-swiper

專案地址GitHub地址：https://github.com/zhouwei1994/nativeCase.git

安裝react-native-swiper

在專案目錄下cmd裡面執行以下命令：

yarn add react-native-swiper

沒有安裝yarn映象的請看教程：

https://blog.csdn.net/weixin_40614372/article/details/86154119

react-native-swiper 的使用

如下程式碼：

import React, { Component } from 'react';
import { ScrollView, StyleSheet, Text, View, Modal, Button, Dimensions,Image } from 'react-native';
//引用外掛
import Swiper from 'react-native-swiper';
const { width, height } = Dimensions.get('window')
class Home extends Component {
    static navigationOptions = {
        title: '輪播圖',
    };
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <ScrollView>
                <Text style={{ fontSize: 30 }}>swiper</Text>
                <Swiper
                    //樣式
                    style={styles.wrapper}
                    //高度
                    height={width * 40 / 75}
                    // 是否顯示控制按鈕（即左右兩側的箭頭是否可見）
                    showsButtons={false}
                    //這個很主要啊，解決白屏問題
                    removeClippedSubviews={false}
                    // 切換時間，單位秒
                    autoplayTimeout={3} 
                    // 是否自動輪播
                    autoplay={true}
                    // 如果為true，滾動方向是橫向的，如果為false，滾動方向是豎向的
                    horizontal={true}
                    // 分頁風格
                    paginationStyle={styles.paginationStyle}
                    // 點樣式
                    dotStyle={styles.dotStyle}
                    // 活動點樣式
                    activeDotStyle={styles.activeDotStyle}
                >
                    <Image resizeMode="cover" source={require('../../images/123.jpg')} style={styles.bannerImg} />
                    <Image resizeMode="cover" source={require('../../images/123.jpg')} style={styles.bannerImg} />
                    <Image resizeMode="cover" source={require('../../images/123.jpg')} style={styles.bannerImg} />
                    <Image resizeMode="cover" source={require('../../images/123.jpg')} style={styles.bannerImg} />
                </Swiper>
            </ScrollView>
        );
    }
}
export default Home;
const styles = StyleSheet.create({
    wrpaper: {
        width: width,
        height: width * 40 / 75,

    },
    paginationStyle: {
        bottom: 6,
    },
    dotStyle: {
        backgroundColor: '#fff',
        opacity: 0.4,
    },
    activeDotStyle: {
        backgroundColor: '#f00',
    },
    bannerImg: {
        width: width,
        height: width * 40 / 75,
    }
});
 

這裡是react-native-swiper的全部例項，不知道各位小夥伴能不能看懂

專案地址GitHub地址：https://github.com/zhouwei1994/nativeCase.git

注意：未經允許不可私自轉載，違者必究