如何在 panGestureHandler 中制作滚动视图 scrolllabe？

Posted 2023-02-19

【中文标题】如何在 panGestureHandler 中制作滚动视图 scrolllabe？

【英文标题】：How to make scroll view scroollabe inside panGestureHandler?

【发布时间】：2021-03-01 16:52:45

【问题描述】：

我正在使用带有reanimated 和react-native-redash 的react-native-gesture-handler 库。我想让 scrollView 可滚动，它嵌套在 panGestureHandler 内，但所有交互都由panGestureHandler 处理，所以 scrollView 不起作用。这是我的代码。

VideoModal.js文件

import Animated , useCode , cond , eq , set , add, block, interpolate, Extrapolate from "react-native-reanimated"
import PanGestureHandler , State  from "react-native-gesture-handler"
import usePanGestureHandler , useValue , timing , snapPoint from "react-native-redash/lib/module/v1"



export default function VideoModal(props) 



const  video  = props;
const gestureHandler , velocity , translation , state = usePanGestureHandler()
const translateY = useValue(0)
const offsetY = useValue(0);
const snapPoints = snapPoint(translateY , velocity.y , [0 ,upperBound])

useCode(()=>block([

  cond(
    eq(state , State.ACTIVE),
    [
      set(translateY , add(offsetY , translation.y))
    ]
  ),


  cond(
    eq(state , State.END),
    [
      set(translateY , timing(from:translateY , to:snapPoints, duration:350)),
      set(offsetY , translateY) 
    ]
  )
  
  ]))


return (
  <>
    <View
      style=
        height: statusBarHeight,
        backgroundColor: 'black',
      
    />
    <PanGestureHandler ...gestureHandler >
    <Animated.View
      style=
        ...shadow,
        transform:[translateY:translateY],
        zIndex:10
      
    >
    <TouchableWithoutFeedback onPress=()=>alert('Working'>
      <View style= backgroundColor: 'white', width >
        <View style= ...StyleSheet.absoluteFillObject >
          <PlayerControls title=video.title onPress=() => alert('abc') />
        </View>
        <AnimatedVideo
          source=video.video
          style= width, height:videoContent  
          resizeMode=Video.RESIZE_MODE_COVER
          shouldPlay
        />
      </View>
    </TouchableWithoutFeedback>
      <Animated.View style= backgroundColor: 'white', width:contentWidth, height:contentHeight >
        <Animated.View style=opacity:contentOpacity>
          **<VideoContent ... video  />**
        </Animated.View>
      </Animated.View>
    </Animated.View>
    </PanGestureHandler>
  </>
);

scrollView 在 VideoContent 中

import 
  View, StyleSheet, Text, Image, ScrollView,
 from 'react-native';

导出默认函数 VideoContent(props)

const  video  = props;
return (
  
  <ScrollView>
    <View style=styles.upNext>
      <Text style=styles.upNextTitle>Up next</Text>
      
        videos.map(v => (
          <View key=v.id style=styles.thumbnail>
            <Image source=v.thumbnail style=styles.thumbnailImage />
            <View style=styles.thumbnailContent>
              <Text numberOfLines=2 style=styles.thumbnailTitle>v.title</Text>
              <Text style=styles.thumbnailUsername>v.username</Text>
            </View>
          </View>
        ))
      
    </View>
  </ScrollView>
  
);

有没有我可以告诉 pangesture 只有当手指放在屏幕顶部时才能工作，否则它不应该工作，我可以滚动滚动视图中的内容？？

【参考方案1】：

嘿，我知道回复你的答案有点晚了，但我也遇到了类似的问题，一些研究我找不到这个技巧

activeOffsetX=[-10, 10]

在你这样的 pangestureHandler 中

 <PanGestureHandler
     onGestureEvent=onGestureEvent
     activeOffsetX=[-10, 10] 
     onHandlerStateChange=evt =>handleStateChange(evt)
     >

来源：https://www.gitmemory.com/issue/software-mansion/react-native-gesture-handler/1380/786721032

希望对你有帮助