React-Native之swiper(轮播组件)

最新推荐文章于 2024-08-09 07:21:50 发布

___Alive___

最新推荐文章于 2024-08-09 07:21:50 发布

阅读量2.4k

点赞数

分类专栏： React-Native

本文链接：https://blog.csdn.net/YU_M_K/article/details/80627069

版权

本文介绍了如何使用React-Native的Swiper组件创建轮播效果，包括基本用法和带图片的轮播展示，通过代码示例和实际效果图展示了轮播组件的实现过程。

摘要由CSDN通过智能技术生成

使用说明：
1. 先安装React-native-swiper
npm i react-native-swiper –save
2. 导入Swiper
import Swiper from ‘react-native-swiper’;

代码：

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'