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

标签 react-native react-native-camera

我正在使用 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 进行了更改以解决此问题。更改链接如下。请检查它是否适用于您的场景。

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

关于react-native - 无法调整 RNCamera react-native-camera 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63052848/

相关文章:

react-native - 检测应用程序在 React Native 中获得焦点

javascript - 我如何将 Android 应用程序包装为 React Native 组件(完整 View )?

windows - 如何端到端测试 React Native 应用程序?

javascript - 错误回调不适用于 React Native 中的地理定位

react-native - 对拍照时 native 视觉相机卡住使用react

javascript - 创建一个随内容增长的 View ,当它达到屏幕高度时开始滚动响应 native ?

android - 在关闭应用程序的情况下使用 'react-native-camera'

javascript - 如何使用 react-native 将图像放在相机 View 的顶部

android - 保存一张花了很长时间的照片

React-native-camera 限制条码扫描区域