如何获得相机预览的高度？

Posted 2023-03-11

【中文标题】如何获得相机预览的高度？

【英文标题】：How can I get height of a camera preview?

【发布时间】：2018-12-12 15:38:28

【问题描述】：

使用react-native-camera（RNCamera），当预览是窗口的全宽时，我正在努力将我的相机预览的高度设置为正确，并且完整的预览可见。此问题假定设备始终处于纵向模式。

我的代码如下：

import React,  Component  from "react";
import  Dimensions, Button, View  from "react-native";
import  RNCamera  from "react-native-camera";

export default class CameraScreen extends Component 
  static navigationOptions = 
    header: null
  ;
  render() 
    return (
      <View>
        <RNCamera
          ref=ref => 
            this.camera = ref;
          
          style=
            width: Dimensions.get("window").width,
            height: 400 // <-- need to know what this value actually is
          
          type=RNCamera.Constants.Type.back
        />
        <Button
          title="This button should appear directly below the camera preview"
          onPress=() => false
        />
      </View>
    );
  
);

我确定它与getSupportedRatiosAsync() 有关，但是这会返回多个比率。有人可以帮忙吗？

【参考方案1】：

首先您必须选择要使用的比率。

4:3、1:1、16:9 等

你的身高可以用你的比例和宽度来计算。

ratio = height:width (对于 react-native-camera)

那么，让我们尝试计算 4:3 比例和 480px 宽度的高度。

var height = 4*width/3; //for portrait mode 3:4

如果您想充分发挥肖像的性能，那么您应该使用 'flex:1'。

您可以在react-native-camera documentation #ratio获取更多详细信息