使用条码扫描仪掩码的透明视图反应本机相机

Question

如何在 react-native-camera 上添加遮罩？

我正在使用 react-native-camera 为 React Native QRCode 扫描仪应用程序构建 UI。

相机顶部的叠加蒙版应为浅灰色，但中间部分必须保持透明（透视）。

但是当我改变外罩的背景颜色时，它似乎也影响了中心部分。我的意思是，当然，它在它的子视图后面。

下面的代码是快照的简化版本。

<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>

知道如何完成这项工作吗？

Answer 1

您需要使用一些掩码的原生视图（iOs、Android）并将您的内容包装在其中

或者你可以使用我们的小库来处理这个https://github.com/ibitcy/react-native-hole-view

Answer 2

你可以使用这个：
react-native-barcode-mask

Answer 3

我终于弄明白了。这个想法是像汉堡一样创建 3 行，然后在运行时计算高度和宽度。

中间一行有 3 个视图组件，中间一个有透明背景和白色边框。

（值 300 来自中心视图（透明区域）的大小，我将其除以 10 来计算 flexbox 的较小比例）

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代替了固定高度。