PanResponder

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

PanResponder scala wiele dotknięć w pojedynczy gest. Sprawia, że gesty jednodotykowe są odporne na dodatkowe dotknięcia oraz umożliwia rozpoznawanie podstawowych gestów wielodotykowych.

Domyślnie PanResponder utrzymuje uchwyt InteractionManager, aby blokować długotrwałe zdarzenia JS przed przerywaniem aktywnych gestów.

Dostarcza przewidywalną nakładkę na procedury obsługi z systemu obsługi gestów. Dla każdej procedury obsługi dostarcza nowy obiekt gestureState wraz z natywnym obiektem zdarzenia:

onPanResponderMove: (event, gestureState) => {}

Natywne zdarzenie to syntetyczne zdarzenie dotykowe w formie PressEvent.

Obiekt gestureState zawiera następujące właściwości:

• stateID - ID stanu gestu - utrzymywane tak długo, jak przynajmniej jeden dotyk jest aktywny na ekranie

• moveX - najnowsze współrzędne ekranowe ostatnio przesuniętego dotyku

• moveY - najnowsze współrzędne ekranowe ostatnio przesuniętego dotyku

• x0 - współrzędne ekranowe przyznania responder'a (początku gestu)

• y0 - współrzędne ekranowe przyznania responder'a (początku gestu)

• dx - skumulowana odległość gestu od początku dotyku

• dy - skumulowana odległość gestu od początku dotyku

• vx - bieżąca prędkość gestu

• vy - bieżąca prędkość gestu

• numberActiveTouches - Liczba aktualnie aktywnych dotknięć na ekranie

Wzorzec użycia

tsx

const ExampleComponent = () => {
  const panResponder = React.useRef(
    PanResponder.create({
      // Ask to be the responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
        true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
        true,

      onPanResponderGrant: (evt, gestureState) => {
        // The gesture has started. Show visual feedback so the user knows
        // what is happening!
        // gestureState.d{x,y} will be set to zero now
      },
      onPanResponderMove: (evt, gestureState) => {
        // The most recent move distance is gestureState.move{X,Y}
        // The accumulated gesture distance since becoming responder is
        // gestureState.d{x,y}
      },
      onPanResponderTerminationRequest: (evt, gestureState) =>
        true,
      onPanResponderRelease: (evt, gestureState) => {
        // The user has released all touches while this view is the
        // responder. This typically means a gesture has succeeded
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // Another component has become the responder, so this gesture
        // should be cancelled
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // Returns whether this component should block native components from becoming the JS
        // responder. Returns true by default. Is currently only supported on android.
        return true;
      },
    }),
  ).current;

  return <View {...panResponder.panHandlers} />;
};

Przykład

PanResponder współpracuje z API Animated przy tworzeniu złożonych gestów w interfejsie. Poniższy przykład zawiera animowany komponent View, który można swobodnie przeciągać po ekranie.

Wypróbuj przykład PanResponder w RNTester.

---

Dokumentacja

Metody

create()

tsx

static create(config: PanResponderCallbacks): PanResponderInstance;

Parametry:

Name	Type	Description
config Required	object	Refer below

Obiekt config dostarcza rozszerzone wersje wszystkich callback'ów responder'a, które zawierają nie tylko PressEvent, ale również stan gestu PanResponder. Osiąga się to poprzez zastąpienie słowa Responder przez PanResponder w standardowych callback'ach onResponder*. Przykładowo, obiekt config zawiera:

• onMoveShouldSetPanResponder: (e, gestureState) => {...}

• onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}

• onStartShouldSetPanResponder: (e, gestureState) => {...}

• onStartShouldSetPanResponderCapture: (e, gestureState) => {...}

• onPanResponderReject: (e, gestureState) => {...}

• onPanResponderGrant: (e, gestureState) => {...}

• onPanResponderStart: (e, gestureState) => {...}

• onPanResponderEnd: (e, gestureState) => {...}

• onPanResponderRelease: (e, gestureState) => {...}

• onPanResponderMove: (e, gestureState) => {...}

• onPanResponderTerminate: (e, gestureState) => {...}

• onPanResponderTerminationRequest: (e, gestureState) => {...}

• onShouldBlockNativeResponder: (e, gestureState) => {...}

Ogólnie rzecz biorąc, dla zdarzeń mających odpowiedniki w fazie capture, aktualizujemy gestureState raz w fazie capture i możemy go użyć również w fazie bubble.

Zachowaj ostrożność przy używaniu wywołań zwrotnych onStartShould*. Odzwierciedlają one zaktualizowany gestureState tylko dla zdarzeń rozpoczęcia/zakończenia, które są propagowane (bubble) lub przechwytywane (capture) przez węzeł. Gdy węzeł stanie się responderem, możesz polegać, że każde zdarzenie rozpoczęcia i zakończenia zostanie przetworzone przez gest, a gestureState zostanie odpowiednio zaktualizowany. Wartość numberActiveTouches może nie być całkowicie dokładna, chyba że jesteś responderem.