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() 是一個異步函數，因此您必須等待它來獲取大小，直到您可以顯示圖像。