需求:
实现一个类似于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看是否可以实现
此文希望帮助到有需要的小伙伴们。有好的实现方案 也可以留言。
网友评论