滑动到下一张时如何重设图像？

问题描述

在我的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 (将#修改为@）