React原生纸长按打开当前位置卡片的特定菜单

正如你在示例图中看到的,我有几张卡片,每一张都有不同的属性。

我必须这样做,当长按一张卡时,会为该卡打开一个特定的菜单(即带有其属性),如果你试图打开一个菜单,但已经有一个菜单打开,前一个菜单应该关闭并在卡应该在的位置打开新的菜单。

菜单示例: menu

我在如何做这件事上遇到了一些问题,你能帮我吗?

链接: expo

import { Text, View, StyleSheet, ImageBackground } from 'react-native';
import { Card, Chip } from 'react-native-paper';
import { FlatGrid } from 'react-native-super-grid';

export default function App() {
  const t = [...Array(36).keys()].map((i) => ({ name: 'Name-' + i, ep: i }));
  return (
    <View style={styles.container}>
      <FlatGrid
        itemDimension={160}
        data={t}
        renderItem={({ item }) => (
          <Card style={{ height: 160 }}>
            <ImageBackground
              source={{
                uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png',
              }}
              style={{
                height: 160,
                borderRadius: 4,
                overflow: 'hidden',
              }}>
              <Card.Content
                style={{
                  backgroundColor: 'rgba(0, 0, 0, 0.5)',
                  position: 'absolute',
                  bottom: 0,
                  paddingTop: 2,
                  paddingBottom: 2,
                }}>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignContent: 'flex-end',
                  }}>
                  <View style={{ width: 120 }}>
                    <Text variant="bodySmall" style={{ color: '#fff' }}>
                      {item.name}
                    </Text>
                    <Text variant="bodySmall" style={{ color: '#fff' }}>
                      2 hours ago
                    </Text>
                  </View>
                  <Chip
                    style={{
                      backgroundColor: '#1faeb3',
                      height: 28,
                    }}>
                    {item.ep}
                  </Chip>
                </View>
              </Card.Content>
            </ImageBackground>
          </Card>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 30,
    backgroundColor: '#000',
    padding: 8,
  },
});