Отменить свайп влево на React Native Swiper - PullRequest
Новая
       16

Отменить свайп влево на React Native Swiper

0 голосов
/ 17 апреля 2019

В настоящее время я использую act-native-swiper с Expo для моего проекта, но у меня возникают проблемы с переопределением поведения левого пролистывания для обеспечения настраиваемого перехода.

Мое использованиеДело: Пользователь может провести пальцем вверх, чтобы просмотреть больше видео.Если им нравится видео, они могут провести пальцем влево, чтобы увидеть более подробную информацию о продукте, представленном в видео.

В настоящее время я реализовал вертикальное перелистывание с использованием response-native-swiper, как показано в моей функции возврата.Компонент Video Slide просто отображает видеокомпонент Expo в виде.

Моя проблема заключается в определении чистого способа переопределить поведение Swiper при левом пролистывании, чтобы я мог передать ему действие навигации.Я попытался использовать доступные методы для response-native-swiper, такие как onTouchStartCapture и onTouchEnd, и сумел заставить работать поведение смахивания (см. Фрагмент кода ниже, например, для возврата), но анимации там нет, и это довольномного взлома.

Каков наилучший для меня способ реализации функции смахивания влево с использованием response-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>
    );

Hacky Swipe Detection 

<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>
...