Реагируйте на родную камеру с прозрачным обзором для маски сканера штрих-кода

Как добавить маску поверх react-native-camera?

Я создаю пользовательский интерфейс для приложения сканера QRCode React Native с помощью react-native-camera.

Маска наложения сверху камеры должна быть светло-серого цвета, но средняя часть должна оставаться прозрачной (прозрачной).

Но когда я меняю backgroundColor на моей внешней маске, кажется, что это также влияет на центральную часть. Я имею в виду, конечно, что он стоит за его дочерним взглядом.

Код ниже - это упрощенная версия снимка.

<Camera
  ref={cam => {
    this.camera = cam;
  }}
  onBarCodeRead={this._onBarCodeRead}
  style={styles.cameraView}
  aspect={Camera.constants.Aspect.fill}
  playSoundOnCapture
>
  <View
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: 'rgba(0.2, 0.2, 0.2, 0.2)',
      alignItems: 'center',
      justifyContent: 'space-around',
    }}
  >
    <View
      style={{
        width: 300,
        height: 300,
        backgroundColor: 'transparent',
        borderColor: 'white',
        borderWidth: 1,
      }}
    />
  </View>
</Camera>

«Основная

Есть идеи, как это сделать?


react-native css react-native-camera
person FisNaN    schedule 29.01.2018    source источник

Ответы (3)


arrow_upward
24
arrow_downward

Я наконец понял это. Идея состоит в том, чтобы создать 3 ряда, как бургер, а затем вычислить высоту и ширину во время выполнения.

В центральном ряду есть 3 компонента просмотра, средний - с прозрачным фоном и белой рамкой.

(значение 300 зависит от размера центрального вида (прозрачной области), я разделил его на 10, чтобы вычислить меньшее соотношение для гибких боксов)

Демонстрация маски штрих-кода

export default class CameraScreen extends React.Component<any, any> {
  render() {
    const { height, width } = Dimensions.get('window');
    const maskRowHeight = Math.round((AppStore.height - 300) / 20);
    const maskColWidth = (width - 300) / 2;

    return (
      <View style={styles.container}>
        <Camera
          ref={cam => {
            this.camera = cam;
          }}
          onBarCodeRead={this._onBarCodeRead}
          style={styles.cameraView}
          aspect={Camera.constants.Aspect.fill}
          playSoundOnCapture
        >
          <View style={styles.maskOutter}>
            <View style={[{ flex: maskRowHeight  }, styles.maskRow, styles.maskFrame]} />
             <View style={[{ flex: 30 }, styles.maskCenter]}>
             <View style={[{ width: maskColWidth }, styles.maskFrame]} />
             <View style={styles.maskInner} />
            <View style={[{ width: maskColWidth }, styles.maskFrame]} />
          </View>
        <View style={[{ flex: maskRowHeight }, styles.maskRow, styles.maskFrame]} />
      </View>
        </Camera>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  cameraView: {
    flex: 1,
    justifyContent: 'flex-start',
  },
  maskOutter: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  maskInner: {
    width: 300,
    backgroundColor: 'transparent',
    borderColor: 'white',
    borderWidth: 1,
  },
  maskFrame: {
    backgroundColor: 'rgba(1,1,1,0.6)',
  },
  maskRow: {
    width: '100%',
  },
  maskCenter: { flexDirection: 'row' },
});

Обновление. Соотношение высоты меняется между телефонами разных производителей в зависимости от того, используются физические / программные кнопки. Вместо этого я заменил фиксированную высоту на flex.

person FisNaN    schedule 01.02.2018
comment
Высота и ширина в функции рендеринга предназначены только для демонстрационных целей. Это должно быть сделано внутри consturctor - person FisNaN; 02.02.2018
comment
Будет ли он сканировать QR-код, если он находится за пределами области сканирования посередине? Пожалуйста, прочтите мой вопрос по этому поводу. - person random1234; 18.04.2018
comment
@ random1234 Да, квадратная форма просто ориентир для пользователей. Я также пробовал другие пакеты сканера кода QC (которые часто представляют собой оболочку react-native-camera), все они сканируют полное изображение из-за собственного кода, стоящего за ним. Так что, если в вашем кадре есть несколько кодов контроля качества. При сканировании нужного файла возникнут некоторые проблемы. - person FisNaN; 19.04.2018
comment
То есть нет возможности заставить его сканировать только часть обзора камеры? - person random1234; 19.04.2018
comment
@ random1234 Мне это не удалось. Однако с точки зрения пользователя они вообще ничего не заметят. - person FisNaN; 19.04.2018
comment
Есть, если QR-коды находятся рядом и друг над другом = ( - person random1234; 20.04.2018

arrow_upward
4
arrow_downward

Вы можете использовать это:
response-native-barcode-mask

person Hugo L.F.    schedule 08.10.2019

arrow_upward
0
arrow_downward

Вам нужно использовать некоторые замаскированные собственные представления (iOS, Android) и обернуть в них свой контент.

Или вы можете использовать нашу небольшую библиотеку для этого https://github.com/ibitcy/react-native-hole-view

person Stephen Kopylov    schedule 21.05.2020