Блог

Я использую react-native-gesture-handler библиотеку с reanimated и react-native-redash . Я хочу сделать 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 находится внутри видеоконтента

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

экспорт видеоконтента функции по умолчанию (реквизит) {

 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 работал, только если палец помещен в верхнюю часть экрана, иначе он не должен работать, и я могу прокручивать содержимое, присутствующее внутри scrollview??

Эй, я знаю, что немного поздно отвечать на ваш ответ, но я также столкнулся с аналогичной проблемой, небольшое исследование не смогло мне найти этот трюк

 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

Надеюсь, это поможет