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

Question

我在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只有当手指放在屏幕的顶部才能工作，否则它不会工作，我可以滚动滚动视图中的内容？？

Answer 1

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

activeOffsetX={[-10, 10]}

在you pangestureHandler中就像这样

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

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

我希望它能帮上忙