React-Native 扫码功能以及从相册读取二维码

最新推荐文章于 2025-06-13 10:18:37 发布

cicistream

最新推荐文章于 2025-06-13 10:18:37 发布

阅读量8.8k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： react-native 文章标签： qr react-native-camera 相册读取二维码

本文链接：https://blog.youkuaiyun.com/sinat_31231955/article/details/88074422

本文介绍了在React-Native项目中如何实现扫码功能和从相册读取二维码。使用了react-native-camera、react-native-image-picker和react-native-local-barcode-recognizer。遇到的问题包括扫描页面黑屏、相机布局、部分二维码无法识别和识别率低。通过调整布局、缩小图片数据和修改解析格式提高了识别率。最后分享了如何解决修改第三方库源码后的打包问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我使用的技术栈是：react-native（0.57.8）+ react-navigation + react-redux + ant-design + axios

我在做的ReactNative项目需要实现扫码功能以及从相册读取本地二维码的功能

我实现这两个功能使用的插件有

扫码功能

扫描页面黑屏

首先是使用react-native-camera完成扫码功能，根据git文档进行安装和配置，摄像头处理权限等配置不再赘述，遇到问题可以在Issue中看看是否有解决。下面称我实现的扫描页面为Scan页。
](https://img-blog.csdnimg.cn/20190302122736533.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMxMjMxOTU1,size_16,color_FFFFFF,t_70)
我遇到的第一个问题是重复进入Scan页，相机加载有问题，会出现黑屏现象。解决办法是，根据navigation判断，当进入页面时，再显示RNCamera.

componentDidMount() {
   
   
    const {
   
    navigation } = this.props;
    navigation.addListener("willFocus", () =>
      this.setState({
   
    focusedScreen: true })
    );
    navigation.addListener("willBlur", () =>
      this.setState({
   
    focusedScreen: false, showModal: false })
    );
  }

// render函数中：
this.state.focusedScreen && RNCameraComponent

相机布局

第二个问题是相机布局，设计给的图是像微信的二维码扫描一样，中间有一块透明区域做扫码。RNCamera无法设置宽高，视图是全屏，需要自己布局。我将页面分为了上中下三块，中间又分为左中右三块，大概是这样：
在这里插入图片描述
中间②区域背景用UI给的透明图片，加上扫描动画，就像模像样啦~
扫描动画用的是RN原生的Animated

// 初始化
 this.state = {
   
   
      moveAnim: new Animated.Value(0), // 扫描动画
};

// 设置扫描高度，速度等
startAnimation = () => {
   
   
    this.state.moveAnim.setValue(258);
    Animated.timing(this.state.moveAnim, {
   
   
      toValue: 0,
      duration: 1500,
      easing: Easing.linear
    }