Знаете, какой элемент был затронут PanResponder React Native?

Question

Я делаю перетаскивание с помощью PanResponder, но я хочу, чтобы только часть компонента была «целью», которая инициирует перетаскивание. Многие элементы содержатся в ScrollView, и перетаскивание элементов за пределы «цели» должно прокручиваться как обычно.

const Dragger = () => {
    return (
        <View {...panResponder.panHandlers}>
            <View style={{ flexDirection: 'row' }}>
                <Text>Drag me</Text>
                <Text>Im not draggable</Text>
            </View>
            <View style={{ flexDirection: 'row' }}>
                <Text>Drag me</Text>
                <Text>Im not draggable</Text>
            </View>
        </View>
    )
}

const Parent = () => {
    return(
        <ScrollView>
            <Text>Stuff</Text>
            <Dragger />
            <Text>Stuff</Text>
        <ScrollView/>
    )
}

Можно ли это сделать или мне нужно прикрепить несколько panHandlers к каждому <Text>Drag me</Text>?

Из документов, которые я вижу, есть nativeEvent.target, который возвращает "The идентификатор узла элемента, получающего событие касания ", однако это просто число, поэтому я не уверен, как его использовать?

Нужно ли мне узнать идентификаторы узлов элементов <Text>Drag me</Text> и посмотреть, есть ли возвращенное число в этом списке?

ОБНОВЛЕНИЕ: Вот более наглядная демонстрация того, что я пытаюсь сделать:

https://snack.expo.io/@jamesweblondon / rude-pretzel

Мне нужно перетащить PanResponder события на серых полях, но не на текстовых полях:

import React from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";

const items = new Array(50).fill(0).map((item, index) => {
  return {
    id: index,
    backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${
      index * 5
    }, ${132})`,
  };
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  item: {
    display: "flex",
    flexDirection: "row",
    height: 200,
    width: "100%",
    justifyContent: "space-around",
    alignItems: "center",
  },
  input: {
    color: "white",
    fontSize: 20,
    height: "100%",
    flex: 1,
  },
  handle: {
    display: "flex",
    backgroundColor: "grey",
    height: "80%",
    width: 100,
    marginHorizontal: 20,
  },
});

export default function App() {
  return (
    <View style={styles.container}>
      {items.map((item) => {
        return (
          <View
            style={[styles.item, { backgroundColor: item.backgroundColor }]}
          >
            <View style={styles.handle} />
            <TextInput style={styles.input} defaultValue={item.id} />
          </View>
        );
      })}
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

Answer 1

Вы начали свой вопрос с некоторых фрагментов, которые я не смог найти в размещенной вами ссылке, поэтому я начал с этого и создал форк. Таким образом, чтобы получить события перетаскивания PanResponder на серых полях, но не на текстовых входах, вы должны сделать следующее для компонента элемента:

<View style={[styles.item, { backgroundColor: item.backgroundColor }]} >
    <View style={styles.handle} {...panResponder.panHandlers} />
    <TextInput style={styles.input}>{item.id}</TextInput>
</View>

Для PanResponder я использовал конфигурацию по умолчанию от https://reactnative.dev/docs/panresponder#example

Вот обновление в вашем коде, чтобы попробовать его.

Надеюсь, это поможет! Скажи мне, если это не работает для тебя.