Wie kann ich einen Rahmen in der Kamera hinzufügen?

Question

Ich muss einen quadratischen Rahmen in der Mitte des Suchers der reaktiven nativen Kameraansicht hinzufügen. Es gibt auch keine Informationen darüber im Repository. Und Fragen werden auch nicht beantwortet.

Answer 1

Welches Modul Sie verwenden? react-native-camera oder react-native-camera-kit?

Wenn Sie nur View (oder Image) in der Kamera-Komponente mit react-native-camera setzen, dann Stilen in der vertikal und horizontal diese Ansicht auszurichten.

So:

const styles = { 
    container: { 
     flex: 1, 
    }, 

    camera: { 
     flex: 1, 
     // These below are most important, they center your border view in container 
     // ref: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 
     alignItems: "center", 
     justifyContent: "center" 
    }, 

    borderImage: { 
     // Your styles for image, or custom borders 
    }, 
} 


class Component extends React.Component { 

    ... 

    render(){ 
     return <View style={styles.container}> 
      <Camera style={styles.camera}> 
       <Image style={styles.borderImage} source={require("./img/qrBorder.png")} /> 
      </Camera> 
     </View>; 
    } 
}