需求:

实现一个类似于swiper滑动的效果。不过没有用swiper实现。是自己写了个函数去控制了；直接基于swiper实现应该会更简单-等我后面再试试的吧~

这是之前写的一个小功能。当初好像写的好像有点费劲-今天分享下- 有相同需求的小伙伴可以参考下思路~
代码可以直接复制 运行查看效果

123123.gif

上代码

import React, {Component} from "react";
import {Image, LayoutAnimation, NativeModules, Platform, StyleSheet, Text, View} from "react-native";
const {UIManager} = NativeModules;
const whiteImage = 'https://img13.ihomefnt.com/arts-centre/UserArt/1b606941456e500aeaef2e6e5cdad4b55a42e6f5e6ad9101aee9ebe1c94a0f5c.png!original';
const imageList = [{
    picUrl: "https://img9.ihomefnt.com/30f4dfce7e781917bb1261d2f04b845cebbd0f6e924df7d1d1bb549f05c1b7d5.jpg!H-MIDDLE",
    index: 0
},
    {
        picUrl: "https://img9.ihomefnt.com/0e080f963528294137fd793b3698dc0be072f087ca0aa9894d98e34398d6dbd9.jpg!H-MIDDLE",
        index: 1
    },
    {
        picUrl: "https://img9.ihomefnt.com/b1f5304a99374d505f69238ac5f0262a6747fb91a09e35ec08790b2df6657a19.jpg!H-MIDDLE",
        index: 2
    },
    {
        picUrl: "https://img9.ihomefnt.com/5beda375dbb22a112c025b39fcfa714fed9133a7c42eb9003ef02fdea9f6c7a0.jpg!H-MIDDLE",
        index: 3
    },
    {
        picUrl: "https://img9.ihomefnt.com/30f4dfce7e781917bb1261d2f04b845cebbd0f6e924df7d1d1bb549f05c1b7d5.jpg!H-MIDDLE",
        index: 4
    },
    {
        picUrl: "https://img9.ihomefnt.com/9024f5d66a650c2d09220a2cdcc703225d143c39acc843930e7eac472b2cdb0f.jpg!H-MIDDLE",
        index: 5
    },
    {
        picUrl: "https://img9.ihomefnt.com/a09f7b7c939462c48bcab38d4d2921d24e1b858cb614af1ce6a03cde8befc972.jpg!H-MIDDLE",
        index: 6
    },
]

export default class Sliding extends Component {
    state = {
        changeIndex: 0, //当前中心位置是第几个
        showImgList: imageList //图片的信息

    }
    startX: any; //记录开始的位置
    _onPress = (type: string) => {
        let {showImgList, changeIndex} = this.state;
        LayoutAnimation.easeInEaseOut();
        //如果第是6个的话 就禁止滑动
        if ((type === "add" && (changeIndex === 6 || changeIndex + 1 === showImgList.length)) || (changeIndex === 0 && type === "less") || showImgList.length === 1) {
            return false;
        }
        showImgList.map((item: any) => {
            if (type === "add") {
                item.index -= 1;
            } else {
                item.index += 1;
            }
            return item;
        });
        //给数组里面下标更新数字
        this.setState({
            changeIndex: (type === "add" ? changeIndex + 1 : changeIndex - 1),
            showImgList,
        })
    };


    componentWillUpdate() {
        LayoutAnimation.easeInEaseOut();
        //安卓端动画支持
        if (Platform.OS === 'android') {
            UIManager.setLayoutAnimationEnabledExperimental(true)
        }
    }
    //结束后
    onTouchEnd = (e: any) => {
        let endX = e.nativeEvent.pageX;
        if (Math.abs(endX - this.startX) > 30) {
            //判断是向左还是向右
            if (endX > this.startX) {
                this._onPress("less");
            } else {
                this._onPress("add");
            }
        }
    }

    //点击记录 按下位置
    onTouchStart = (e: any) => {
        this.startX = e.nativeEvent.pageX;
    }

    render() {
        let {showImgList, changeIndex} = this.state;
        const style = [
            styles.location0,
            styles.location1,
            styles.location2,
            styles.location3,
            styles.location4
        ];
        let picUrl = showImgList[changeIndex] && showImgList[changeIndex].picUrl;
        return (
            <View style={{flex: 1}}>
                <View style={styles.goodsImgView}>
                    <Image source={{uri: picUrl}} style={styles.goodsBigImg}/>
                </View>
                <View style={styles.changeView} onTouchStart={this.onTouchStart} onTouchEnd={this.onTouchEnd}>
                    <View style={styles.whiteView}>
                        {/* 切换的模块了 */}
                        {showImgList.map((item: any, index: number) => {
                            return (
                                <Image key={index}
                                       source={{uri: item.picUrl}}
                                       style={[style[item.index + 2]]}/>
                            )
                        })}
                        <Image source={{uri: whiteImage}} style={styles.whiteBac}/>
                        {/* 基本操作 */}
                        <View style={styles.circle}/>
                        <Text
                            style={styles.toggleTitle}
                        >
                            左右滑动切换图案
                        </Text>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    goodsImgView: {
        width: 375,
        flex: 3,
        justifyContent: 'center',
        alignItems: 'center',
    },
    goodsBigImg: {
        width: 270,
        height: 325,
    },
    changeView: {
        width: 375,
        flex: 2,
        justifyContent: "flex-end",
        alignItems: "center"
    },
    whiteView: {
        width: 375,
        height: 135,
        alignItems: "center"
    },
    whiteBac: {
        width: 375,
        height: 135,
        position: "absolute",
        zIndex: 12
    },
    toggleTitle: {
        paddingTop: 45,
        color: "#8D8B8A",
        fontSize: 14,
        zIndex: 12,
        position: "absolute",
        bottom: 65,
    },

    circle: {
        backgroundColor: "#ED7100",
        width: 10,
        height: 10,
        borderRadius: 5,
        position: "absolute",
        top: 30,
        zIndex: 13
    },
    location0: {
        position: "absolute",
        bottom: 70,
        left: 20,
        width: 90,
        height: 90,
        transform: [{rotate: "-35deg"}],
        zIndex: 9,
        borderRadius: 6
    },
    location1: {
        position: "absolute",
        bottom: 94,
        left: 55,
        width: 105,
        height: 105,
        transform: [{rotate: "-17deg"}],
        zIndex: 10,
        borderRadius: 6
    },
    location2: {
        position: "absolute",
        bottom: 100,
        width: 130,
        height: 130,
        zIndex: 11,
        borderRadius: 6
    },
    location3: {
        position: "absolute",
        bottom: 94,
        right: 55,
        width: 105,
        height: 105,
        transform: [{rotate: "17deg"}],
        zIndex: 10,
        borderRadius: 6
    },
    location4: {
        position: "absolute",
        bottom: 70,
        right: 20,
        width: 90,
        height: 90,

        transform: [{rotate: "35deg"}],
        zIndex: 9,
        borderRadius: 6
    }
});

代码可以直接复制到RN里面进行运行- 实现的逻辑也在代码中注释了-下面说一下思路吧

TIPS:简单的说一下思路

由于我这个需求是下方固定好6个方块。第一个不可以向左滑动。第6个不可以向右滑动-其他人有相似需要 进行修改即可；

• 首先写好6个滑动块的样式-这边用的是绝对定位和层级 旋转好不同角度
• 在最外层的VIew 绑定 按下(onTouchStart) 和松开事件(onTouchEnd)
• 按下事件记录下当前按的X轴位置,在松后时候获取到离开的X轴位置。进行判断是向左向右
• 得到结果后。对现有数组进行更新。更新数组中index的下标
• 在渲染时候根据下标更换不同的位置style={[style[item.index + 2]]}
• 中间加入LayoutAnimation.easeInEaseOut()动画效果 即可；

当然了 也可以根据reactNative的手势进行判断，回头自己在基于swiper看是否可以实现
此文希望帮助到有需要的小伙伴们。有好的实现方案 也可以留言。