React Native 视图不是 100% 宽度答案

【问题标题】：React Native view is not 100% widthReact Native 视图不是 100% 宽度
【发布时间】：2020-12-18 13:10:22
【问题描述】：

我几乎尽我所能，为什么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;

【问题讨论】：

标签： node.js reactjs react-native view expo

【解决方案1】：

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

您可以从style 中删除absoluteFillObject 来解决此问题。

【讨论】：

不起作用，已经尝试过，但感谢您的帮助

【解决方案2】：

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

import { Camera } from 'expo-camera';

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

【讨论】：

【解决方案3】：

我宁愿建议你使用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]} >

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

<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 值来围绕中心移动透明视图。

【讨论】：