React Native Expo 图像大小调整

Question

我正在使用 react native expo 来显示各种主题的图像。 我使用的图像具有多种宽度、高度和纵横比。 图像本身来自 google firebase 存储，并从包含 firebase 存储图像 URL 的当前选择的主题 JSON 数据中检索。

有些主题根本没有图像，这很好，但是我希望下面的内容向上移动，因此在这种情况下固定大小/纵横比的图像或视图是不合适的。 正如我所说，图像具有不同的高度和宽度（一些风景/一些肖像。

目前我正在尝试的图像的样式是这样的：

   Image: {
      height: null,
      width: "90%",
      alignSelf: 'center',
      resizeMode: 'contain'
   },

当前高度设置为空，图像根本不显示，下面的内容位于上面。

我想要的宽度固定为当前正在执行的屏幕宽度的 90%，但是我遇到了高度问题。 我尝试将高度设置为“未定义”以及百分比“40%”等，但这不适用于缺少图像的主题。

我尝试过的另一种方法是将图像放置在这样的视图中：

      <View style={styles.ImageContainer}>
          <Image style={styles.Image} source={{ url: subject.ImageUrl }}/>
      </View>
...
// Styling:
   Image: {
      height: null,
      width: "100%", // 100% of the image container which is 90% of screen.
      alignSelf: 'center',
      resizeMode: 'contain'
   },
   ImageContainer: {
      width: '90%',
      alignSelf: 'center',
      justifyContent: 'center'
   }

我真正想要实现的是将图像容器设置为图像高度的大小，调整大小使其填充屏幕宽度的 90%（不倾斜/拉伸图像）。

在样式中有没有办法做到这一点，还是我必须尝试使用​​函数？ 我确信我过去通过造型成功实现了这一目标。

Answer 1

您可以为图像使用 minHeight 以确保它显示，它应该使用实际的图像高度，但设置最小值将允许它显示。

或者

您可以使用 Image.getSize() 并使用图像的确切高度。 但是， Image.getSize() 是一个异步函数，因此您必须等待它来获取大小，直到您可以显示图像。