如何在react-native中实现刮刮卡/视图？

Question

我正在寻找一个 package 来实现 react-native 中的刮刮卡。我找到了这个库https://github.com/thebylito/react-native-scratch-card但问题是它只适用于 android。是否有一个适用于 iOS 和 android 的库，或者我可以在纯 javascript 中实现它吗？

Answer 1

您可以使用我制作的库：react-native-scratch

npm install react-native-scratch --save

该库支持 Android 和 iOS，并允许您在应用程序中使用多个草稿视图，例如 - 带有刮刮卡的 FlatList。

其他功能包括：

• 自动填充包含视图以覆盖其内容，直到您划伤为止
• 加载图像时使用的用户定义的背景颜色
• 您可以从 url 或应用程序中的资源文件设置图像（或根本没有图像）
• 支持图像大小调整模式（拉伸/覆盖/包含）
• 用户定义的画笔大小和划痕阈值
• 触摸事件（阻止 ScrollView/FlatList 在刮擦时滚动）
• 抓挠时的进度报告
• 当草稿视图达到其草稿阈值时淡入淡出动画（可选）

Answer 2

UPD 2022试试这个库https://www.npmjs.com/package/rn-scratch-card

它针对 Android 和 iOS 实施。

Answer 3

你可以使用这个https://github.com/romangua/react-native-scratch-view库来实现 iOS 和 android 的刮刮卡。

通过运行安装它

npm install react-native-scratch-view --save

之后链接它

react-native link react-native-scratch-view

如果您在运行安装命令后在终端中收到 404 not Found 错误。 你可以这样做：

1- 打开你的 package.json 文件

2- 在您的依赖项中执行以下操作：

"dependencies":{
    "react-native-scratch-view": "romangua/react-native-scratch-view",
}

3- 在此之后运行npm install ，您可以通过使用import ScratchImageView from 'react-native-scratch-view';直接在您的项目中使用它import ScratchImageView from 'react-native-scratch-view';

我为 Android 和 iOS 使用相同的库，并且它在两者上都可以使用。

希望这可以帮助！！