需求:

實(shí)現(xiàn)一個(gè)類似于swiper滑動(dòng)的效果整葡。不過沒有用swiper實(shí)現(xiàn)。是自己寫了個(gè)函數(shù)去控制了遭居；直接基于swiper實(shí)現(xiàn)應(yīng)該會更簡單-等我后面再試試的吧~

這是之前寫的一個(gè)小功能魏滚。當(dāng)初好像寫的好像有點(diǎn)費(fèi)勁-今天分享下- 有相同需求的小伙伴可以參考下思路~
代碼可以直接復(fù)制 運(yùn)行查看效果

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, //當(dāng)前中心位置是第幾個(gè)
        showImgList: imageList //圖片的信息

    }
    startX: any; //記錄開始的位置
    _onPress = (type: string) => {
        let {showImgList, changeIndex} = this.state;
        LayoutAnimation.easeInEaseOut();
        //如果第是6個(gè)的話 就禁止滑動(dòng)
        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;
        });
        //給數(shù)組里面下標(biāo)更新數(shù)字
        this.setState({
            changeIndex: (type === "add" ? changeIndex + 1 : changeIndex - 1),
            showImgList,
        })
    };


    componentWillUpdate() {
        LayoutAnimation.easeInEaseOut();
        //安卓端動(dòng)畫支持
        if (Platform.OS === 'android') {
            UIManager.setLayoutAnimationEnabledExperimental(true)
        }
    }
    //結(jié)束后
    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");
            }
        }
    }

    //點(diǎn)擊記錄 按下位置
    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}
                        >
                            左右滑動(dòng)切換圖案
                        </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
    }
});

代碼可以直接復(fù)制到RN里面進(jìn)行運(yùn)行- 實(shí)現(xiàn)的邏輯也在代碼中注釋了-下面說一下思路吧

TIPS:簡單的說一下思路

由于我這個(gè)需求是下方固定好6個(gè)方塊。第一個(gè)不可以向左滑動(dòng)赦役。第6個(gè)不可以向右滑動(dòng)-其他人有相似需要 進(jìn)行修改即可掂摔；

• 首先寫好6個(gè)滑動(dòng)塊的樣式-這邊用的是絕對定位和層級 旋轉(zhuǎn)好不同角度
• 在最外層的VIew 綁定 按下(onTouchStart) 和松開事件(onTouchEnd)
• 按下事件記錄下當(dāng)前按的X軸位置,在松后時(shí)候獲取到離開的X軸位置乙漓。進(jìn)行判斷是向左向右
• 得到結(jié)果后。對現(xiàn)有數(shù)組進(jìn)行更新叭披。更新數(shù)組中index的下標(biāo)
• 在渲染時(shí)候根據(jù)下標(biāo)更換不同的位置style={[style[item.index + 2]]}
• 中間加入LayoutAnimation.easeInEaseOut()動(dòng)畫效果 即可涩蜘；

當(dāng)然了 也可以根據(jù)reactNative的手勢進(jìn)行判斷同诫，回頭自己在基于swiper看是否可以實(shí)現(xiàn)
此文希望幫助到有需要的小伙伴們。有好的實(shí)現(xiàn)方案 也可以留言掐场。