0

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

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>
  </>
);

}

在scrollViewVideoContent 里面

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

4

1 回答 1

2

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

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

我希望它有帮助

于 2021-07-14T12:09:18.677 回答