React-native-gesture-handler: onGestureEvent não funciona em FlatList

Criado em 29 jun. 2020 · 3Comentários · Fonte: software-mansion/react-native-gesture-handler

Estou tentando obter o gesto de um FlatList porque preciso do translation.y e não do contentOffset.y dado pelo evento onScroll. Isso ocorre porque estou traduzindo FlatList e escondendo o cabeçalho conforme o usuário rola e usar o deslocamento provoca falhas ( vídeo e código-fonte )

Os tipos atuais de FlatList dizem que os adereços podem incluir NativeViewGestureHandlerProperties , isso significa que onGestureEvent e onHandlerStateChange estão disponíveis. Então isso é possível:

import { FlatList } from "react-native-gesture-handler";

<FlatList
      onGestureEvent={() => console.log("onGestureEvent")}
      onHandlerStateChange={() => console.log("onHandlerStateChange")}
      keyExtractor={keyExtractor}
      data={data}
      renderItem={renderItem}
    />

A verdade é que nem onGestureEvent nem onHandlerStateChange são chamados conforme você rola.

Estou usando a versão mais recente de react-native-gesture-handler (v1.6.1) e esta é minha pilha:

Expo CLI 3.21.12 environment info: System: OS: macOS 10.15.5 Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node Yarn: 1.22.4 - ~/.nvm/versions/node/v12.14.1/bin/yarn npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman IDEs: Android Studio: 3.6 AI-192.7142.36.36.6392135 Xcode: 11.5/11E608c - /usr/bin/xcodebuild npmPackages: expo: ~37.0.3 => 37.0.12 react: ~16.9.0 => 16.9.0 react-dom: ~16.9.0 => 16.9.0 react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4 react-native-web: ~0.11.7 => 0.11.7 npmGlobalPackages: expo-cli: 3.21.12

To verify

Fonte

neiker

Comentários muito úteis

Para qualquer um que esteja lendo isto:

Você pode embrulhar FlatList (importado de react-native ) usando PanGestureHandler conforme descrito aqui:
https://github.com/software-mansion/react-native-gesture-handler/issues/492

import { FlatList } from "react-native";
import {
  PanGestureHandler,
  NativeViewGestureHandler,
} from "react-native-gesture-handler";

<PanGestureHandler
  ref={panRef}
  simultaneousHandlers={listRef}
  onGestureEvent={gestureHandler}
>
  <NativeViewGestureHandler ref={listRef} simultaneousHandlers={panRef}>
    <FlatList
      keyExtractor={keyExtractor}
      data={data}
      renderItem={renderItem}
    />
  </NativeViewGestureHandler>
</PanGestureHandler>

Mas, esse problema ainda é válido. Os tipos estão errados, FlatList por react-native-gesture-handler não implementa onHandlerStateChange nem onGestureEvent .

neiker em 19 jul. 2020

👍3

Todos 3 comentários

Para qualquer um que esteja lendo isto:

Você pode embrulhar FlatList (importado de react-native ) usando PanGestureHandler conforme descrito aqui:
https://github.com/software-mansion/react-native-gesture-handler/issues/492

import { FlatList } from "react-native";
import {
  PanGestureHandler,
  NativeViewGestureHandler,
} from "react-native-gesture-handler";

<PanGestureHandler
  ref={panRef}
  simultaneousHandlers={listRef}
  onGestureEvent={gestureHandler}
>
  <NativeViewGestureHandler ref={listRef} simultaneousHandlers={panRef}>
    <FlatList
      keyExtractor={keyExtractor}
      data={data}
      renderItem={renderItem}
    />
  </NativeViewGestureHandler>
</PanGestureHandler>

Mas, esse problema ainda é válido. Os tipos estão errados, FlatList por react-native-gesture-handler não implementa onHandlerStateChange nem onGestureEvent .

neiker em 19 jul. 2020

👍3

Você tentou passar RNGH ScrollView via renderScrollComponent prop?