react swiper 基本使用指南 （长期更新案例代码，也可以联系提供代码）

Posted 2023-04-03

参考技术A swiper 版本非常多，所以如果大家引入的资源如果报错或者找不着，那么必定是版本不对啦。

官网案例，如果找不到模块，那么就是版本不对的坑了。自己去node_module里面去看看文件是否存在。

安装 npm i swiper
案例安装的版本号是 "swiper": "^8.0.7",

swiper react 官方文档。

api简单介绍

spaceBetween：间距；slidesPerView：展示几个滑块；onSlideChange滑动监听；
Navigation：就是左右两个耳朵，加了这个属性就会有样式，在modules对象数组里添加Navigation，会绑定事件和方法，控制左右切换。
pagination：就是下面的小圆点指示器，同理添加这个属性和对应的css，就会有样式出现，添加到modules对象数组里面就会绑定方法。
这里就是简单的介绍了，我用的swiper版本是8.0，react要16.8，有hooks的就行。
=========================================================

引入样式文件
import styles from "./swiperComBox.module.scss"

使用组件

上面的视频是用了Dpalyer 流媒体m3u8，有兴趣了解的可以私聊我。
具体的功能案例有地址，多看文档吧。

还没写。。
官网文档案例地址
再次注意，modules 里面要添加，属性要添加，引入要引入。有问题可以联系我~hhh

react-native-swiper 按钮无法正常工作

【中文标题】react-native-swiper 按钮无法正常工作

【英文标题】：react-native-swiper button is not work properly

【发布时间】：2017-11-21 07:26:02

【问题描述】：

问题

当react-native-swiper 如下图移动时，下方的蓝色活动按钮不会更新。

对于 swiper，我正在使用 map() 函数创建一个视图。

请注意，将键（索引）传递给子视图组件不会更新蓝色按钮。

如果我在不使用 swiper 中的 map() 函数的情况下对视图进行硬编码，则该按钮将起作用。

有什么问题？

参考照片

我的代码

import React from 'react';
import  View, Platfrom, Text, StyleSheet, AsyncStorage, TouchableOpacity, Image, FlatList, ScrollView  from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import  connect  from 'react-redux';
import moment from 'moment';
import Swiper from 'react-native-swiper';

import * as settings from '../../config/settings';


const styles = StyleSheet.create(
    headerRight: 
        padding: 10
    ,
    body_txt: 
        marginTop: 5,
        padding: 8,
        borderWidth: 1,
        borderColor: '#EAEAEA',
    ,
    slidmain: 
        borderColor: '#EAEAEA',
        borderWidth: 1,
    ,
    slide1: 
        width: '100%',
        height: 300,
    ,
    main: 
        flex: 1,
        backgroundColor: '#FFFFFF',
        padding: 10,
    ,
    image: 
        height: 100,
        width: '98%',
        marginBottom: 70,
        marginLeft: '1%',
        resizeMode: 'contain',
    
);


class RepairInquiryDetailScreen extends React.Component 
    constructor(props) 
        super(props);
        this.state = 
            created_date: '',
            photos: [],
            key: 0,
        
    

    static navigationOptions = ( navigation ) => (
        title: '수선 문의서',

        headerStyle: 
            backgroundColor: '#fff',
            borderBottomWidth: 0,
            elevation: 0,
        ,
        headerTitleStyle: 
            color: '#000',
            fontSize: 20,
            textAlign: 'center',
            alignSelf: 'center',
        ,
        headerRight: <Icon name="bars" size=30 color="#333" onPress=() => navigation.navigate('DrawerOpen') style=styles.headerRight />
    )

    RepairInquiryDetailService = async () => 
        let user_info = await AsyncStorage.getItem('user_info');
        user_token = JSON.parse(user_info).key;
        let inquiry_id = this.props.navigation.state.params.id
        const api_uri = settings.base_uri + 'inquiry/' + inquiry_id + '/'

        fetch(api_uri, 
            method: 'GET',
            headers: 
                'Authorization': 'Token ' + user_token,
            
        )
            .then(res => res.json())
            .then(res => 

                let repair_type_tmp = ""
                for (i = 0; i < res.repair_type.length; i++) 
                    if (i == 0) 
                        repair_type_tmp += res.repair_type[i].type;
                     else 
                        repair_type_tmp += ", " + res.repair_type[i].type;
                    
                

                let photos_tmp = [];
                for (i = 0; i < res.photos.length; i++) 
                    photos_tmp[i] = res.photos[i].thumbnail;
                

                let logistics_tmp = "";
                if (res.logistics == "delivery") 
                    logistics_tmp = "택배";
                 else if (res.logistics == "quick") 
                    logistics_tmp = "퀵";
                 else if (res.logistics == "direct") 
                    logistics_tmp = "방문";
                 else 
                    logistics_tmp = res.logistics;
                

                this.setState(
                    product_type: res.product_type.type,
                    repair_type: repair_type_tmp,
                    model: res.model,
                    content: res.content,
                    logistics: logistics_tmp,
                    created_date: res.created_date,
                    direct_partner: res.direct_partner,
                    photos: photos_tmp,
                )

                console.log(this.state.photos)
            )


            .catch((error) => 
                console.error(error);
            );
    

    componentDidMount() 
        this.RepairInquiryDetailService();
    

    render() 
        const parsedDate = moment(this.state.created_date).format("YYYY.MM.DD")

        return (
            <ScrollView style=styles.main>
                <Swiper 
                    style=styles.slidmain 
                    height=300 
                    showsButtons=false
                    loop=false
                    >
                    this.state.photos.map((item, key) => 
                        console.log(item, key);
                        return (
                            <Slide uri=item key=key i=key/>
                        );
                    )
                </Swiper>
                <View style=styles.body_txt>
                    <Text>제품 카테고리: this.state.product_type</Text>
                    <Text>수선 카테고리: this.state.repair_type</Text>
                    <Text>모델명: this.state.model</Text>
                    <Text>배송유형: this.state.logistics</Text>
                    <Text>작성일: parsedDate</Text>
                    <Text>문의 상세내용: this.state.content</Text>
                </View>
            </ScrollView>
        )
    


const Slide = props => 
    console.log('uri and key: ', props.uri, props.i);
    return (
        <View style=styles.slide1 key=props.i>
            <Image
                source= uri: props.uri 
                style=styles.slide1
            />
        </View>
    );



const mapStateToProps = state => (
    isLoggedIn: state.loginReducer.isLoggedIn
)

const RepairInquiryDetail = connect(mapStateToProps, null)(RepairInquiryDetailScreen);

export default RepairInquiryDetail;

谢谢！

【参考方案1】：

发现 here 的建议解决方法是从您的 Swiper 组件中删除 style 属性。

要获得您想要的边框，您可以将您的 swiper 包裹在父视图中。希望这会有所帮助。

【讨论】：

不幸的是，当我从 Swiper 组件中删除样式时，按钮没有更新..