更新时间:2023-12-03 11:22:10
您正在使用哪个模块? react-native-camera
或react-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>;
}
}