如何在React Native中突出显示平面列表中的选定项目？

Question

我正在使用 React Native 开发一个应用程序。有一个如图所示的屏幕，我正在该屏幕上显示带有平面列表的消息。当长按一条消息时，我想得到如图 2 所示的视图。我尝试了该包https://www.npmjs.com/package/react-native-highlight-overlay但没有得到我想要的结果。当我长按平面列表中的任何元素时，该元素应该出现在前台，并且在其下方应该打开一个额外的框。我怎样才能做到这一点？

import React from 'react';
import { Text, View, FlatList, TouchableOpacity, } from 'react-native';

export const Screen = () => {

  const data = [
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
    { title: "test", text: "text" },
  ]


  const Card = ({ item }) => {
    return (
      <TouchableOpacity style={{ padding: 16, rowGap: 8, borderWidth:2, borderColor:"black", margin:16, borderRadius:16 }}>
        <Text>{item.title}</Text>
        <Text>{item.text}</Text>
      </TouchableOpacity>
    )
  }
  return (
    <View >
      <FlatList
        data={data}
        renderItem={({ item }) => <Card item={item} />}
      />
    </View>
  );
};

Answer 1

只要按照以下步骤操作，您不必为此使用任何软件包：

注意：您将使用react-native 中的模态来实现此目的。

1. 假设您正在使用

   TouchableOpacity

   组件，请传递

   onLongPress

   属性并传递函数以使模态可见并存储单击的

   item

2. 现在在模态中，创建一个

   View

   （将其命名为叠加视图）并指定黑色背景颜色和 alpha 0.6 ('rgba(0,0,0,0.6)')，这样它将成为叠加的指定颜色。
3. 在overlay中创建一个view

   View

   ，并在其中传递选中的item数据
4. 使用您想要的表情符号选项创建另一个视图并使其左对齐

你肯定会得到预期的输出