如何在相機中添加邊框？

Question

我需要在反應原生相機視圖的取景器中間添加一個方框。在存儲庫中也沒有關於它的信息。那裏的問題也沒有得到回答。

Answer 1

您正在使用的模塊？ react-native-camera或react-native-camera-kit？

如果您使用react-native-camera只需將View（或Image）放入相機組件中，然後添加樣式以垂直和水平對齊此視圖。

像這樣：

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