react-native 扫码 函数式组件 hooks

//
import React, { useEffect, useRef, useState } from 'react'
import {
  StyleSheet,
  Text, TouchableOpacity,
  View,
  Animated,
  Easing,
} from "react-native"
import { RNCamera } from 'react-native-camera'
import { Icon } from 'react-native-elements'

export default function Scanner({ navigation }) {
  const [FlashMode, setFlashMode] = useState(false)
  const [showCamera, setShowCamera] = useState(true)
  const moveAnim = useRef(new Animated.Value(-1)).current
  const [camera, setCamera] = useState('')
  const [isBarcodeRead, setIsBarcodeRead] = useState(false)
  useEffect(() => {
    startAnimation()
    // 监听当结果页返回时，重新启动相机监听扫描事件
    if (showCamera) {
      navigation.addListener('didFocus', () => {
        setShowCamera(true)
      })
    }
  }, [showCamera])

  const startAnimation = () => {
    moveAnim.setValue(-200)
    Animated.timing(moveAnim, {
      toValue: -1,
      duration: 2000,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start(() => startAnimation())
  }
  // 扫描事件
  const onBarCodeRead = result => {
    if (!isBarcodeRead) {
      setIsBarcodeRead(true)
      // 卸载扫一扫组件，否则还会持续扫描
      setShowCamera(false)
      navigation.navigate('ScannerResult', {
        imageUri: null,
        scannerResult: JSON.stringify(result),
      })
    }
  }
  // 拍照事件
  const takePicture = async () => {
    if (camera) {
      const options = { quality: 0.5, base64: true }
      const data = await camera.takePictureAsync(options)
      setShowCamera(false)
      navigation.push('ScannerResult', {
        imageUri: data.uri,
        scannerResult: '',
      })
    }
  }
  // 闪光灯开关
  const _changeFlashMode = () => {
    setFlashMode(!FlashMode)
  }
  return (
    <View style={styles.container}>
      {showCamera ? (
        <RNCamera
          ref={ref => setCamera(ref)}
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={FlashMode ? 1 : 0}
          onBarCodeRead={onBarCodeRead}>
          <View style={styles.rectangleContainer}>
            <View style={styles.rectangle} />
            <Animated.View
              style={[
                styles.border,
                { transform: [{ translateY: moveAnim }] },
              ]}
            />
            <Text style={styles.rectangleText}>
              将二维码放入框内，即可自动扫描
            </Text>
            <View style={{ flexDirection: 'row', marginTop: 15 }}>
              <TouchableOpacity
                onPress={() => navigation.goBack()}>
                <Icon name="keyboard-arrow-left" size={36} color={'green'} />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={takePicture}
                style={{ marginLeft: 25 }}>
                <Icon name="camera" size={36} color={'green'} />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={_changeFlashMode}
                style={{ marginLeft: 25 }}>
                <Icon
                  name="highlight"
                  size={36}
                  color={FlashMode ? 'green' : 'gray'}
                />
              </TouchableOpacity>
            </View>
          </View>
        </RNCamera>
      ) : (
        <View />
      )}
    </View>
  )

}
const styles = StyleSheet.create({
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  },
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  rectangleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
  },
  rectangle: {
    height: 200,
    width: 200,
    borderWidth: 1,
    borderColor: '#00FF00',
    backgroundColor: 'transparent',
  },
  rectangleText: {
    flex: 0,
    color: '#fff',
    marginTop: 10,
  },
  border: {
    flex: 0,
    width: 195,
    height: 2,
    backgroundColor: '#00FF00',
  },
})