React Native 扫码组件react-native-camera与自定义UI界面动画套装

最新推荐文章于 2024-08-24 07:34:58 发布

孟凡涛

最新推荐文章于 2024-08-24 07:34:58 发布

阅读量9.4k

点赞数 2

分类专栏： React Native 文章标签： react-native 扫码动画

本文链接：https://blog.csdn.net/qq_28978893/article/details/79107243

版权

本文介绍了使用react-native-camera组件在React Native项目中实现扫码功能时遇到的问题及其解决办法，包括界面白屏问题的解决。同时，文章详细展示了如何参照微信扫一扫优化UI，实现阴影效果、绿色边框角和扫描线动画，通过实例代码分享了具体的实现过程。

摘要由CSDN通过智能技术生成

扫码这个功能在普通项目中用到的案例还是比较多的，签到、加好友、WebView跳转等等

针对扫码这个功能，react-native的前辈们已经封装好了可以跨平台的组件
react-native-camera
亲测是非常好用的，虽然有很多提Issue，但是最新的版本还是比较稳定的

给大家说一下我在用的时候遇到的一个自己挖的坑
因为我的项目有不止一个界面用到了这个功能，所以我在不同的导航器中用到了同一个界面，界面的key值也是相同的，导航倒是没有出现错乱，但是在打开Camera的时候会出现白屏，相机始终不能渲染出来，当然对Key值进行区分，这个问题也就解决了，刚开始以为是组件的问题，去官网一顿找相似的issue

好了，忘记这个issue继续说，UI，功能测试没问题之后发现这个customer界面是真的没做什么优化，真的很丑，所以，拿来微信的扫一扫功能来参考一下

微信爸爸的扫一扫

经过对一些功能的筛选，我们对一些细节进行了模仿

先看一下效果吧

模仿后的效果

说一下具体进行的模仿模块

1、四周阴影和中间全透明的效果实现
实现这个效果我走了点弯路，实现方法也是比较麻烦，先给大家分享一下，我是将界面分成了5部分（View），中间框是一部分，四周是一部份

2、四个绿色的边框角
这四个边框角的原型是两个View，每个View是一条线

<View style={
   { position: 'absolute', left: 0, top: 0 }}>
  <View style={
   { height: 2, width: px2dp(60), backgroundColor: '#37b44a' }} />
  <View style={
   { height: px2dp(60), width: 2, backgroundColor: '#37b44a' }} />
</View>

其实就是一横一竖，宽度和高度分别是2，这个是左上角的，右上角的边框是通过左上角的旋转角度而来

<View style={
   { position: 'absolute', right: 1, top: -1, transform: [{
   rotate: '90deg'}] }}>
  <View style={
   { height: 2, width: px2dp(60), backgroundColor: '#37b44a' }} />
  <View style={
   { height: px2dp(60), width: 2, backgroundColor: '#37b44a' }}