Android React本机映像占用所有可用的垂直空间

我是新来的react native（两天前开始），但我很快就学会了，因为我已经知道react的规则。我正在尝试编写一个真实世界的应用程序，但我不知道如何正确放置图像，我希望我的图像标签占据屏幕上所有的水平空间，但我也希望它保持在屏幕顶部，并保持其纵横比（我不能硬编码，因为我还将显示其他牌照的图片，包括与北美不同的2/1欧洲牌照），但实际图像不会占用所有可用的垂直空间

下面是我的代码呈现内容和我实际需要的内容的GIMP编辑：

以下是我的渲染函数：

导出默认类应用程序扩展组件{
...
render（）{
返回(
);
}
}

---

我熟悉css的布局选项，但react native似乎有所不同，我无法将我的头脑集中在宽度、flex和resizeModes的所有组合上。

使用flex时，当您添加{borderWidth:2，borderColor:'red'}时，您可以看到图像自动占据大量空间。相反，您必须手动指定高度。如果希望正确缩放高度，可以尝试以下操作：

import React from "react";
import { View, Image, Button, Dimensions } from "react-native";

class App extends React.Component {
  state = {
    imgWidth: 0,
    imgHeight: 0
  };

  componentDidMount() {
    Image.getSize("https://i.ibb.co/HgsfWpH/sc128.jpg", (width, height) => {
      // Calculate image width and height
      const screenWidth = Dimensions.get("window").width;
      const scaleFactor = width / screenWidth;
      const imageHeight = height / scaleFactor;
      this.setState({ imgWidth: screenWidth, imgHeight: imageHeight });
    });
  }
  render() {
    return (
      <View
        style={{ flex: 1, justifyContent: "flex-start", alignItems: "center" }}
      >
        <Image
          style={{
            flex: 1,
            width: Dimensions.get("window").width,
            borderColor: "red",
            borderWidth: 2
          }}
          source={{
            uri: "https://i.ibb.co/HgsfWpH/sc128.jpg"
          }}
          resizeMode="contain"
        />
        <Button title="Random state" onPress={this.getRandomState} />
      </View>
    );
  }
}

export default App;

从“React”导入React；
从“react native”导入{视图、图像、按钮、维度}；
类应用程序扩展了React.Component{
状态={
imgWidth:0，
灯光：0
};
componentDidMount（）{
Image.getSize（“https://i.ibb.co/HgsfWpH/sc128.jpg“，（宽度、高度）=>{
//计算图像宽度和高度
const screenWidth=维度.get（“窗口”）.width；
const scaleFactor=宽度/屏幕宽度；
常量imageHeight=高度/比例因子；
this.setState（{imgWidth:screenWidth，imgHeight:imageHeight}）；
});
}
render（）{
返回(
);
}
}
导出默认应用程序；

通常，在将

flex

应用于包含

和

的

标记时，父组件的子组件将应用相同的
flex
道具。因此，您可以移除
下的
flex
道具

在react native中处理
已经有一段时间了，我必须说，为
高度
和
宽度
指定值对于正确显示
非常重要

你可以在我的世博会上试试

render（）{
返回(
);
}

另外，由于您还不熟悉本地反应，我建议您将
更改为
？当用户在移动设备上按下它时，它提供了一种视觉帮助。
谢谢，这正是我所需要的。kenmistry的回答也是朝着正确方向迈出的一步，但您的答案更合适，因为我所有的图像都不是同一个方面o并且能够在飞行中计算图像的高度是非常有用的！
  render() {
    return (
      <View style={{
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center'
      }}>
        <Image
          source={require(`./resources/images/north_america/original/alaska.jpg`)}
          style={{
            width: screenWidth,
            height: 200,
          }}
          resizeMode="contain"
        />
        <Button
          title="Random state"
          onPress={this.getRandomState}
        />
      </View>
    );
  }