覆盖在React Native Swiper上向左滑动

Question

我目前在项目中将react-native-swiper与Expo一起使用，但是无法覆盖左滑动行为以提供自定义过渡。

我的用例： 用户可以向上滑动以观看更多视频。如果他们喜欢视频，则可以向左滑动以查看有关视频中特色产品的更多详细信息。

我目前已经在我的return函数中使用react-native-swiper实现了垂直滑动。视频幻灯片组件只是在视图中呈现Expo视频组件。

我的问题是确定一种清除左滑动时Swiper行为的干净方法，以便向其传递导航操作。我已经尝试在react-native-swiper上使用可用的方法，例如onTouchStartCapture和onTouchEnd，并设法使滑动行为起作用（例如，请参见返回内容下面的代码段），但是动画不存在，而且很漂亮很有道理。

如果可能的话，对我来说，使用react-native-swiper实现向左滑动功能的最佳方法是什么？

this.props.products.productFinish ? ( //Boolean represents whether API has fetched product objects from backend
      <View style={styles.defaultView}>
        <Swiper
          loadMinimal
          loadMinimalSize={2}
          showsPagination={false}
          style={styles.wrapper}
          loop={false}
          horizontal={false} //Enables vertical scrolling
        >
          {this.props.products.listAll.map((product, i) => (
            <VideoSlide
              product={product}
              categories={this.props.categories}
              setSelectedCategory={category =>
                this.props.setSelectedCategory(category)
              }
              i={i}
              key={i}
              navigation={this.props.navigation}
              onViewProductScreen={item => {
                navigate("Detail", item);
              }}
            />
          ))}
        </Swiper>
      </View>
    ) : (
      <View style={styles.activityIndicatorView}>
        <ActivityIndicator
          size="large"
        />
      </View>
    );

快速刷卡检测

<Swiper
          containerStyle={{width}}
          showsPagination={false}
          style={styles.wrapper}
          showsButtons={false}
          loop={false}
          horizontal={true}
          onTouchStart={(e) => {
            this.setState({
              touchStartX: e.nativeEvent.locationX,
              beingTouched: true
            });
          }}
          onTouchEnd={(e, state, context) => {
            let diff =
              Math.floor(this.state.touchStartX) - e.nativeEvent.locationX;
            console.log("diff", diff);
            if (diff > 150) {
              console.log("swipe");
              BlockTimer.execute(() => {
                this.props.onViewProductScreen({ product });
              }, 500);
            }
          }}
        >
 <Video
              source={{ uri: firstVideoUri }}
              rate={1.0}
              volume={1.0}
              // isMuted={false}
              resizeMode="fit"
              shouldPlay={this.state.shouldPlay}
              isLooping
              style={{ width: width, height: height - 100 }}
            />
</Swiper>