2020年React Native 實現掃描二維碼function組件寫法

最近項目中要用到掃描二維碼功能，網上找了一圈遇到很多坑，要麼是代碼太老沒法運行，要麼是效果不符合。把最終實現分享給你們。

function組件寫法

實現效果以下：

代碼：

import {RNCamera} from 'react-native-camera';
import React, {useEffect, useRef} from 'react';
import {
  StyleSheet,
  Animated,
  PermissionsAndroid,
  default as Easing,
  ImageBackground,
  View,
  Text,
} from 'react-native';

let camera;

const ScanQRCode = () => {
  const moveAnim = useRef(new Animated.Value(-2)).current;

  useEffect(() => {
    requestCameraPermission();
    startAnimation();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  //請求權限的方法
  const requestCameraPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: '申請攝像頭權限',
          message: '掃描二維碼須要開啓相機權限',
          buttonNeutral: '等會再問我',
          buttonNegative: '不行',
          buttonPositive: '好吧',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('如今你得到攝像頭權限了');
      } else {
        console.log('用戶沒有容許相機權限');
      }
    } catch (err) {
      console.warn(err);
    }
  };

  /** 掃描框動畫*/
  const startAnimation = () => {
    Animated.sequence([
      Animated.timing(moveAnim, {
        toValue: 200,
        duration: 1500,
        easing: Easing.linear,
        useNativeDriver: false,
      }),
      Animated.timing(moveAnim, {
        toValue: -1,
        duration: 1500,
        easing: Easing.linear,
        useNativeDriver: false,
      }),
    ]).start(() => startAnimation());
  };
  const onBarCodeRead = (result) => {
    const {data} = result; //只要拿到data就能夠了
    //掃碼後的操做
    console.log(data);
    alert(data);
  };

  return (
    <View style={styles.container}>
      <RNCamera
        ref={(ref) => {
          camera = ref;
        }}
        autoFocus={RNCamera.Constants.AutoFocus.on} /*自動對焦*/
        style={[styles.preview]}
        type={RNCamera.Constants.Type.back} /*切換先後攝像頭 front前back後*/
        flashMode={RNCamera.Constants.FlashMode.off} /*相機閃光模式*/
        onBarCodeRead={onBarCodeRead}>
        <View
          style={{
            width: 500,
            height: 220,
            backgroundColor: 'rgba(0,0,0,0.5)',
          }}
        />

        <View style={[{flexDirection: 'row'}]}>
          <View
            style={{
              backgroundColor: 'rgba(0,0,0,0.5)',
              height: 200,
              width: 200,
            }}
          />
          <ImageBackground
            source={require('./assets/qrcode_bg.png')}
            style={{width: 200, height: 200}}>
            <Animated.View
              style={[styles.border, {transform: [{translateY: moveAnim}]}]}
            />
          </ImageBackground>
          <View
            style={{
              backgroundColor: 'rgba(0,0,0,0.5)',
              height: 200,
              width: 200,
            }}
          />
        </View>

        <View
          style={{
            flex: 1,
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            width: 500,
            alignItems: 'center',
          }}>
          <Text style={styles.rectangleText}>
            將二維碼放入框內，便可自動掃描
          </Text>
        </View>
      </RNCamera>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  preview: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  rectangleContainer: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  rectangle: {
    height: 200,
    width: 200,
    borderWidth: 1,
    borderColor: '#fcb602',
    backgroundColor: 'transparent',
    borderRadius: 10,
  },
  rectangleText: {
    flex: 0,
    color: '#fff',
    marginTop: 10,
  },
  border: {
    flex: 0,
    width: 196,
    height: 2,
    backgroundColor: '#fcb602',
    borderRadius: 50,
  },
});

export default ScanQRCode;

使用到了react-native-camera組件，具體安裝細節就不贅述了，遇到問題能夠留言評論。

安裝方法請參照官網：

https://react-native-community.github.io/react-native-camera/docs/installation.html

 

安裝步驟：

npm install react-native-camera --save

Android - other required steps

Add permissions to your app android/app/src/main/AndroidManifest.xml file:

<!-- Required -->
<uses-permission android:name="android.permission.CAMERA" />

<!-- Include this only if you are planning to use the camera roll -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!-- Include this only if you are planning to use the microphone for video recording -->
<uses-permission android:name="android.permission.RECORD_AUDIO"/>

Insert the following lines in android/app/build.gradle:

android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
  }
}

 

素材以下（中間是透明的）：

參考：

https://blog.csdn.net/qq_38356174/article/details/95360470

 

若是看我文章還有疑問能夠去看下，個人視頻實錄。

https://www.bilibili.com/video/BV1ST4y1L7VD/