React Native入门篇—react-native-swiper的安装和配置

注意：未经允许不可私自转载，违者必究

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 (
            
                swiper
                
                    
                    
                    
                    
                
            
        );
    }
}
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

注意：未经允许不可私自转载，违者必究