npm 包 react-native-barcode-sdk-v2 使用教程

随着移动互联网的发展，扫码功能成为了许多应用中必不可少的一部分。在 React Native 中实现扫码功能需要使用第三方的库。一个很好用的库就是 react-native-barcode-sdk-v2。本文将详细介绍该库的使用方法和注意事项。

安装

使用 npm 安装 react-native-barcode-sdk-v2：

npm install react-native-barcode-sdk-v2 --save

集成

如果你的 React Native 项目是使用了 Expo 进行开发，那么你可以根据 SDK 的版本来使用相应的包。如果你的 React Native 项目没有使用 Expo，那么你需要引入相应的原生库。

对于 iOS 应用，你需要在 Podfile 文件中添加：

pod 'ZYScanerCode', '~> 2.12.0'

对于 Android 应用，你需要在 build.gradle 文件中添加：

implementation 'com.skd:scanlibrary:1.0.3'

并在 MainApplication.java 文件中添加：

import com.skd.androidrecording.video.impl.MiSGLSurfaceView;
import com.skd.androidrecording.video.impl.ZXingViewManager;

// ...

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    // ...
    new ZXingViewManager()
  );
}

使用

在需要使用扫码功能的组件中引入头文件：

import RNBDSKView from 'react-native-barcode-sdk-v2';

然后在 render 方法中使用 RNBDSKView 进行渲染，并设置需要监听的事件：

<RNBDSKView
  style={{ flex: 1 }}
  onDetect={(code) => console.log(code)}
  onError={(message) => console.log(message)}
/>

在这里我们监听了 onDetect 和 onError 这两个事件。onDetect 事件会在识别到二维码或条形码后触发，传入参数 code 表示识别到的码。onError 事件会在识别出错时触发，传入参数 message 表示错误信息。

注意事项

• iOS 应用需要使用真实设备进行测试，模拟器无法使用相机。
• 如果你的应用权限设置不当，会导致应用无法正常使用相机和相册资源。

示例代码

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import RNBDSKView from 'react-native-barcode-sdk-v2';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>扫码功能示例</Text>
        <RNBDSKView
          style={{ flex: 1 }}
          onDetect={(code) => console.log(code)}
          onError={(message) => console.log(message)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    marginBottom: 16,
  },
});

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53dfd