全屏谷歌反应原生代码栏扫描仪

Question

我试图让以下示例成为全屏：

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Alert } from 'react-native';
import BarcodeScanner from 'react-native-barcode-scanner-google';


export default class BarcodeApp extends Component {
  render() {
    return (
      <View style={{
        flex: 1
      }}>
          <BarcodeScanner
              style={{
                flex: 1
              }}
              onBarcodeRead={({data, type}) => {
                  // handle your scanned barcodes here!
                  // as an example, we show an alert:
                  Alert.alert(`Barcode '${data}' of type '${type}' was scanned.`);
              }}
          />
      </View>
    );
  }
}

AppRegistry.registerComponent('brcodegooglern', () => BarcodeApp);

问题是：目前，在我的物理设备上，屏幕只显示其大小的一半。

我还希望将文本和图像等元素放在相机可视化屏幕的顶部。

如何做到这一点？

PS：我使用react-native-barcode-scanner-google而不是react-native-camera，因为onBarcodeRead的性能似乎略好一些。