且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在相机中添加边框?

更新时间:2023-12-03 11:22:10

您正在使用哪个模块? react-native-camerareact-native-camera-kit?

Which module you are using? react-native-camera or react-native-camera-kit?

如果使用react-native-camera,只需将View(或Image)放在Camera组件内,然后在该视图的垂直和水平方向上添加样式即可.

If you using react-native-camera just put View (or Image) inside Camera component, then add styles to vertically and horizontally align this view.

赞:

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