如何在React-Native中实现刮擦卡 /视图



我正在寻找一个包装以在React-Native中实现刮擦卡。我发现了这个库https://github.com/thebylito/reeact-native-scratch-card,但问题在于它仅在Android上起作用。是否有在iOS和Android上都可以使用的库,还是可以在纯JavaScript中实现?

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

npm install react-native-scratch --save

此库支持Android和iOS,并使您可以在应用程序中使用多个刮擦视图,例如带有刮擦卡的flatlist。

其他功能包括:

  • 自动填充包含视图以覆盖其内容,直到您刮擦
  • 用户定义的背景颜色要加载时使用
  • 您可以从URL或应用程序中的资源文件设置映像(或没有完全图像)
  • 图像调整大小模式得到支持(拉伸/封面/包含)
  • 用户定义的刷子尺寸和刮擦阈值
  • 触摸事件(在刮擦时停止滚动浏览/flatlist滚动)
  • 刮擦时的进度报告
  • 淡出动画(可选)当刮擦视图到达其划痕阈值

upd 2022 尝试此库https://www.npmjs.com/package/rn-scratch-card

它是针对Android和iOS实施的。

您可以使用此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的错误。您可以这样做:

1-打开您的软件包。JSON文件

2-在您的依赖项中做这样的事情:

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

3-在此之后运行npm install,您可以使用import ScratchImageView from 'react-native-scratch-view';

直接在项目中使用它

我在Android和iOS上都使用相同的库,并且在这两个方面都在工作。

希望这会有所帮助!

相关内容

  • 没有找到相关文章