如何将图像置于相机视图之外？

如何解决如何将图像置于相机视图之外？

我想将扫描图标置于相机视图之外，我尝试使用<View style={{ position: 'absolute' }} />，结果是扫描图标已被遮盖。

是否可以将扫描图标置于相机视图之外？

import React from 'react';
import { View,Text,Dimensions,StyleSheet,Image } from 'react-native';
import { RNCamera } from 'react-native-camera';

import { Translate } from '../../assets/translations';
const { width } = Dimensions.get('window');
import QRCodeIcon from '../../assets/image/qrcode.png';

const rectDimensions = width * 0.75; // this is equivalent to 255 from a 393 device width
const overlayColor = "#fff"; // this gives us a black color with a 50% transparency

const QRCodeScreen2 = () => {

  return (
    <View style={styles.container}>
      <RNCamera
        // ref={cam => {
        //   this.camera = cam;
        // }}
        onBarCodeRead={(data) => console.log('onBarCodeRead data',data)}
        style={styles.cameraview}
        // aspect={RNCamera.constants.Aspect.fill}
        playSoundOnCapture
      >

        <View style={styles.rectangleContainer}>
          <View style={{ position: 'absolute',top: 30,borderColor:'pink',borderWidth: 1 }}>
            <Image source={QRCodeIcon} style={{ width: 300,height: 300 }} />
          </View>
          <View style={{ flexDirection: "row" }}>
            <View style={styles.leftAndRightOverlay} />

            <View style={styles.rectangle}>

            </View>

            <View style={styles.leftAndRightOverlay} />
            
          </View>

          <View style={styles.bottomOverlay} />
        </View>
      </RNCamera>
      <View style={{ justifyContent: 'center',alignItems: 'center' }}>
        <Text style={styles.textStyle}>Test</Text>
        <Text style={styles.textStyle}>Test2</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,},cameraview: {
    flex: 1,height: rectDimensions,width: rectDimensions,// justifyContent: 'center',alignSelf: 'center'
  },rectangleContainer: {
    flex: 1,alignItems: "center",justifyContent: "center",backgroundColor: "transparent",rectangle: {
    height: rectDimensions,borderWidth: 0,borderColor: '#fff',backgroundColor: "transparent"
  },bottomOverlay: {
    flex: 3,height: width,width: width,backgroundColor: overlayColor,paddingBottom: width * 0.25
  },leftAndRightOverlay: {
    height: rectDimensions,textStyle: {
    fontFamily: 'PingFang TC',fontWeight: '500',fontSize: 16,letterSpacing: 0.25
  }
})

export default QRCodeScreen2;