Блог

Я перепробовал почти все, что мог, почему 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;
 

Похоже BarCodeScanner , что камера всегда сохраняет свое соотношение сторон (высота / ширина). Экран вашего телефона (безопасная область) имеет несколько иное соотношение сторон, и поэтому камера не подходит идеально.

Вы можете удалить absoluteFillObject from style , чтобы исправить это.

В настоящее время я думаю, что вместо этого мы можем использовать компонент камеры

 import { Camera } from 'expo-camera';

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

Я бы предпочел предложить вам использовать 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 и так далее), Чтобы переместить прозрачный вид вокруг центра.