我正在使用 React 原生相机 <RNCamera></RNCamera>
在我的 QR 扫描 react 原生项目中。我面临这个问题,我无法调整相机视口(viewport)的高度。
我尝试使用将列向下弯曲成 3 个,每个 2 个,然后将其放在中间,它会自行扩展以采用一定的高度大小。
我也尝试在样式中设置高度,但它仍然扩展为确定的大小。
这是我所做的。
<View style={{ flex: 2, }}></View>
<View style={{ marginHorizontal: 16,flex:2 }}>
<RNCamera
ref={(ref) => {
this.camera = ref;
}}
style={{ height: newWidth }}
captureAudio={false}
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.on}
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
onBarCodeRead={(barcodeText) => { this._onBarcodeRead(barcodeText); }}
>
<View style={{ flex: 2.5 }}>
</View>
</RNCamera>
</View>
<View style={{ flex: 2, }}></View>
如果每个 flex 都使用 backgroundcolor 属性设置样式,则可以看出这些 flex 工作正常。但是RNCamera
的范围|总是超出设定的界限。有人可以指导我如何设置 RNCamera Viewport 的样式,还是无法更改的固定高度 View ?
最佳答案
我们有类似的场景相机 View 是屏幕的 75%,但从预览中单击的图像是全高图像。我们对原生相机 View 进行了更改以解决此问题。更改链接如下。请检查它是否适用于您的场景。
<RNCamera
ref={ref => {
this.camera = ref;
}}
captureAudio={false}
style={Platform.OS === "ios" ? createPostStyle.previewIOS : createPostStyle.previewAndroid}
type={RNCamera.Constants.Type.back}
flashMode={this.state.flash}
ratio={'4:4'}
androidCameraPermissionOptions={{
title: string.alert.CameraPermissionTitle,
message: string.alert.CameraPermissionNote,
buttonPositive: string.alert.buttonOk,
buttonNegative: string.alert.buttonDontAllow,
}}
/>
const createPostStyle = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.profileTabSelectedColor
},
previewIOS: {
flexDirection: 'column',
alignItems: 'center',
width: Dimensions.get('window').width,
flex:1,
backgroundColor: colors.profileTabSelectedColor
},
previewAndroid: {
flex:1 ,
width:Dimensions.get('window').width,
backgroundColor: colors.profileTabSelectedColor
},
})
关于react-native - 无法调整 RNCamera react-native-camera 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63052848/