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

Question

我在我的 React Native 项目中使用 React Native 相机 <RNCamera></RNCamera> 进行 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 的样式，还是无法更改的固定高度视图？

Answer 1

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

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

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

Cannot resize RNCamera react-native-camera

react-native

react-native-camera