react-native - 无法调整 RNCamera react-native-camera 的大小

Question

我<RNCamera></RNCamera>在我的 react native 项目中使用 React native camera 进行 QR 扫描。我面临这个问题，我无法调整相机视口的高度。

我尝试使用将列向下弯曲成 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 的样式，还是无法更改的固定高度视图？

标签： react-nativereact-native-camera

Answer 1

我们有类似的场景相机视图是屏幕的 75%，但从预览中单击的图像是全高图像。我们对原生相机视图进行了更改以解决此问题。更改链接如下。请检查它是否适用于您的场景。

https://github.com/rajanshahsa/react-native-camera/pull/1/commits/439fcf4dd8c6034224770df5504fa4f1fd8bad78

<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
    },
})