如何解决滑动到下一张时如何重设图像?
在我的React Native 0.63.2应用程序中,可以通过PanGestureHandler
和react-native-gesture-handler 1.7
中的react-native-reanimated 1.13
滑动图像。这是代码:
import React,{useState} from "react";
import { ScrollView,Dimensions,StyleSheet,TouchableOpacity,View,} from "react-native";
import { PanGestureHandler,State,PinchGestureHandler,RotationGestureHandler } from "react-native-gesture-handler";
import FastImage from 'react-native-fast-image';
import {Button,Left,Right,Icon,Input,Text,Header,Container,Content } from 'native-base';
import Animated,{set,cond,block,eq,add,Value,event,concat,multiply,clockRunning,debug,divide,floor,not,useCode} from "react-native-reanimated";
import {snapPoint,timing,useClock,useValue} from "react-native-redash";
const { width,height } = Dimensions.get("window");
const pan1Ref = React.createRef();
const rotationRef = React.createRef();
const panRef = React.createRef();
const pinchRef = React.createRef();
function Swipe({route,navigation}) {
const {images,index} = route.params;
const snapPoints = images.map((_,i) => i * -width);
const clock = useClock();
const aniIndex = useValue(index);
const offsetX = useValue(0);
const translateX = useValue(0);
const velocityX = useValue(0); //
const dragX = useValue(0);//
const state = useValue(-1);//
const to = snapPoint(translateX,velocityX,snapPoints);
const handleSwipe = event([
{
nativeEvent: ({ translationX: dragX,velocityX:velocityX,state }) => block([
cond(eq(state,State.ACTIVE),[
set(translateX,add(offsetX,dragX)),//set(Z,1)
]),cond(eq(state,State.END),timing({ clock,from: translateX,to })),set(offsetX,translateX),cond(not(clockRunning(clock)),[
set(aniIndex,floor(divide(translateX,-width))),//debug("index",index),]),])
},]);
return (
<View style={[styles.container,{width: width * images.length,height,flexDirection: "row",}]}>
<TouchableOpacity style={{width:width*images.length,height:height}} onPress={()=> navigation.goBack()}>
<PanGestureHandler //<<==responds to swipe
ref={pan1Ref}
maxPointers={1}
simultaneousHandlers={[panRef,pinchRef,rotationRef]}
onGestureEvent={handleSwipe}
onHandlerStateChange={handleSwipe}
>
<Animated.View style={[{width: width*images.length,height:height,},{transform:[{translateX:translateX}]}]}>
{images.map((img_source) => {
return (
<Animated.View key={img_source.fileName}>
<Swipeable img_source={img_source} Z={Z} /> //<<==Swipeable is responsible to drag,zoom and rotate of image
</Animated.View>
)})}
</Animated.View>
</PanGestureHandler>
</TouchableOpacity>
</View>
);
};
function Swipeable({img_source}) {
const X = new Value(0); //<<==drag X
const Y = new Value(0); //<<==drag Y
const R = new Value(0); //<<==rotate
const Z = new Value(1); //<<==zoom
const offsetX = new Value(0);
const offsetY = new Value(0);
const offsetR = new Value(0);
const offsetZ = new Value(1);
const handlePan = event([ //<<==handle drag of image
{
nativeEvent: ({ translationX: x,translationY: y,state }) =>
block([
set(X,add(x,offsetX)),set(Y,add(y,offsetY)),[
set(offsetX,x)),set(offsetY,add(offsetY,y)),]);
const handleRotate = event([
{
nativeEvent: ({ rotation: r,state }) =>
block([
set(R,add(r,offsetR)),[set(offsetR,add(offsetR,r))]),]);
const handleZoom = event([
{
nativeEvent: ({ scale: z,state }) =>
block([
cond(eq(state,set(Z,multiply(z,offsetZ))),[set(offsetZ,multiply(offsetZ,z))]),]);
return (
<>
<PanGestureHandler
ref={panRef}
minDist={10}
simultaneousHandlers={[rotationRef,pan1Ref]}
onGestureEvent={handlePan}
onHandlerStateChange={handlePan}
>
<Animated.View>
<PinchGestureHandler
ref={pinchRef}
simultaneousHandlers={[rotationRef,panRef,pan1Ref]}
onGestureEvent={handleZoom}
onHandlerStateChange={handleZoom}>
<Animated.View>
<RotationGestureHandler
ref={rotationRef}
simultaneousHandlers={[pinchRef,pan1Ref]}
onGestureEvent={handleRotate}
onHandlerStateChange={handleRotate}
>
<Animated.View >
<Animated.View style={[{
transform: [
{ translateX: X },{ translateY: Y },{ rotate: concat(R,'rad') },{ scale: Z },],]}>
<FastImage
source={{uri:img_source.path}}
resizeMode={FastImage.resizeMode.contain}
style={styles.image} //<<==image shown in full screen
/>
</Animated.View>
</Animated.View>
</RotationGestureHandler>
</Animated.View>
</PinchGestureHandler>
</Animated.View>
</PanGestureHandler>
</>
);
};
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,backgroundColor: "black",picture: {
flexGrow:1,overflow: "hidden",image: {
width:width,wrapper: { //<<== <Animated.View style={styles.wrapper}> between gesturehandlers
flexGrow: 1,});
export default Swipe;
该应用程序存在的问题是,放大图像后,图像的大小变化会与snapPoint
混淆在一起,而滑动可能会落在2张图像的中间。同样,放大的图像可能会扩展到其相邻图像并产生重叠。滑动时如何将图像重置为原始图像?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。