1

我几乎尽我所能，为什么BarCodeScanner视图不是全宽的？它的左右填充看起来像 15-20 像素，所以它的两侧有白色的垂直条纹。我正在使用 Android 8 的真实设备上对此进行测试

import * as React from 'react';
import { Text, SafeAreaView, View, StyleSheet, Button, Dimensions } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { BarCodeScanner } from 'expo-barcode-scanner';

const Stack = createStackNavigator();

class BarcodeScannerExample extends React.Component {

  render() {
    return (
      <SafeAreaView
          style={{
            flex: 1,
            flexDirection: 'column',
            justifyContent: 'flex-end',
          }}>
          <BarCodeScanner
            onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
            style={[StyleSheet.absoluteFillObject, styles.container]}>
          </BarCodeScanner>
      </SafeAreaView>
    );
  }
}

const { width } = Dimensions.get('window');
const qrSize = width * 0.9;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    width: width,
    padding: 0,
    margin: 0,
  },
});

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={BarcodeScannerExample} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
4

3 回答 3

0

目前，我认为我们可以改用 Camera 组件

import { Camera } from 'expo-camera';

 <Camera
                    onBarCodeScanned={canScan ? handleBarCodeScanned : undefined}
                    style={[{
                        width: Dimensions.get('screen').width,
                        height: Dimensions.get('screen').height
                    }, StyleSheet.absoluteFill]} >
于 2021-03-31T00:49:27.390 回答
0

看起来BarCodeScanner' 的相机始终保持其纵横比（高度/宽度）。您手机的屏幕（安全区域）的纵横比略有不同，因此相机并不完全适合。

您可以删除absoluteFillObjectfromstyle以解决此问题。

于 2020-12-18T14:49:52.327 回答
0

我宁愿建议您使用该Camera组件，BarCodeScanner在某些情况下有一些占用 100% 宽度和/或高度的问题。

使用安装Camera组件

expo install expo-camera

或者

npm install expo-camera

用法：

<Camera
                   onBarCodeScanned={scanned ? handleBarCodeScanned : undefined}
                   style={[{
                       width: Dimensions.get('screen').width,
                       height: Dimensions.get('screen').height
                   }, StyleSheet.absoluteFillObject]} >

您可以通过设置一个透明的中心区域来进一步改进 UI，以便使用半透明或深色边缘进行扫描。
例如：

<Camera
                    onBarCodeScanned={scanned ? handleBarCodeScanned : undefined}
                    style={[{
                        width: Dimensions.get('screen').width,
                        height: Dimensions.get('screen').height
                    }, StyleSheet.absoluteFillObject]} >
        <View style={styles.layerTop} />
        <View style={styles.layerCenter}>
          <View style={styles.layerLeft} />
          <View style={styles.focused} />
          <View style={styles.layerRight} />
        </View>
        <View style={styles.layerBottom} />
</Camera>

const opacity = 'rgba(0, 0, 0, .6)';
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    
  },
  layerTop: {
    flex: 2,
    backgroundColor: opacity
  },
  layerCenter: {
    flex: 3,
    flexDirection: 'row'
  },
  layerLeft: {
    flex: 1,
    backgroundColor: opacity
  },
  focused: {
    flex: 6,
    
  },
  layerRight: {
    flex: 1,
    backgroundColor: opacity
  },
  layerBottom: {
    flex: 4,
    backgroundColor: opacity
  },
});

您可以调整不同样式属性（例如：layerTop、layerLeft 等）的 flex 值以围绕中心移动透明视图。

于 2021-04-28T14:02:35.967 回答