2

设想：

我里面有很多项目FlatList，我Modal在长按任何项目并在释放触摸时关闭它时显示一个带有项目坐标的 。

我正在使用Pressable来实现长按并onLayout获取项目坐标。

Item组件看起来像这样

const Item = ({ data, toggleModal }) => {
  const [layout, setLayout] = React.useState(null);
  return (
    <Pressable
      style={styles.item}
      delayLongPress={300}
      onLayout={({ nativeEvent }) => {
        setLayout(nativeEvent.layout);
      }}
      onLongPress={() => {
        toggleModal(layout);
      }}
      onPressOut={() => {
        toggleModal(null);
      }}>
      <Text style={styles.text}>{data}</Text>
    </Pressable>
  );
};

App组件看起来像这样

// imports

export default function App() {
  const data = ['1', '2', '3', '4'];
  const [state, setState] = React.useState({
    visible: false,
    layout: { x: 0, y: 0, height: 0, width: 0 },
  });

  const toggleModal = (layout) => {
    setState((prevState) => ({
      ...prevState,
      visible: !prevState.visible,
      layout,
    }));
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={({ item }) => item}
        renderItem={({ item }) => (
          <Item data={item} toggleModal={toggleModal} />
        )}
      />
      <Modal visible={state.visible}>
        <Button title={'Close'} onPress={toggleModal} />
        <Text>
          layout: x:{state.layout?.x}, y:{state.layout?.y}, height:
          {state.layout?.height}, width:{state.layout?.width}
        </Text>
      </Modal>
    </View>
  );
}

但是无论我按哪个项目，所有项目的坐标都是相同的。

如果我使用CellRendererComponent而不是renderItem我得到正确的坐标但Modal没有被关闭。

CellRendererComponent={({ item }) => (
  <Item data={item} toggleModal={toggleModal} />
)}

使用ScrollView效果很好。

这是世博演示

4

0 回答 0