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

Question

使用 react-native-camera (RNCamera)，当预览是 window 的整个宽度时，我很难将我的相机预览的高度设置为正确，并且完整预览可见.此问题假设设备始终处于纵向模式。

我的代码如下：

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() 有关，但是这个 returns 倍数比率。有人可以帮忙吗？

Answer 1

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

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

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

ratio = height:width (for react-native-camera)

所以，让我们尝试计算 4:3 比例和 480 像素宽度的高度。

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

如果你想要完整的肖像表现，那么你应该使用 'flex:1'。

您可以在 react-native-camera documentation #ratio

中了解更多详细信息

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

How can I get height of a camera preview?

reactjs

react-native

react-native-camera