Question

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

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

相机顶部的覆盖遮罩应为浅灰色，但中间部分必须保持透明（透明）。

但是当我在外面罩上更改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>

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

Answer 1

我终于找到了这一个。我们的想法是创建像汉堡一样的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替换了固定高度。

Answer 2

您可以使用此：
react-native-barcode-mask

Answer 3

您需要使用一些隐藏的本机视图（iOs，Android）并将内容包装在其中

或者您可以为此https://github.com/ibitcy/react-native-hole-view

使用我们的小型库

使用条形码扫描仪遮罩的透明视图对本机相机进行反应

3 个答案: