web-dev-qa-db-fra.com

React appareil photo natif avec une vue transparente pour le masque du scanner de codes-barres

Comment ajouter un masque au-dessus de la caméra React-Native?

Je suis en train de créer l'interface utilisateur pour une application de scanner React Native QRCode utilisant react-native-camera.

Le masque de superposition sur le dessus de la caméra doit être de couleur gris clair, mais la partie centrale doit rester transparente (transparente).

Mais lorsque je change la couleur de fond de mon masque extérieur, cela semble également affecter la partie centrale. Je veux dire, bien sûr, c'est derrière sa vision enfantine.

Le code ci-dessous est une version simplifiée de l'instantané.

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

The basic idea is here

Une idée de comment y parvenir?

cssreact-nativereact-native-camera
10
FisNaN

J'ai enfin compris celui-ci. L'idée est de créer 3 rangées comme un hamburger puis de calculer la hauteur et la largeur à l'exécution.

La rangée centrale a 3 composants de vue, celle du milieu a un fond transparent et une bordure blanche.

(la valeur, 300, vient de la taille de la vue centrale (zone transparente), je l'ai divisée par 10 pour calculer un rapport plus petit pour les flexbox)

Barcode mask demo

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' },
});

Mise à jour: Le rapport de hauteur change entre les différents téléphones de marque en dépendent utilise les boutons physiques/logiciels . J'ai plutôt remplacé la hauteur fixe par flex.

13
FisNaN

Vous pouvez utiliser ceci:
react-native-barcode-mask

0
Hugo L.F.