React Native - 如何保持宽度=“100％”的图像比例？

Question

我的数据库中有图片 uri，我正在使用 width: "100%"

渲染它们

由于图像可以是 1080x1080、750x1080 和 1920x1080，我需要找到一种方法来渲染它们保持纵横比o...我的意思是，如果我有设备宽度为600px，图片宽度为600px（“100%”），高度自动调整，以免丢失比例。

我试过这个CSS：

  image: {
    width: "100%",
    aspectRatio: 1,
  },

但仅适用于方形图像 (1080x1080)。 我该怎么做一个height: "auto" in react native，以便其他图像的大小调整为正确的方面？

重要提示：我不知道图片的尺寸，我只知道图片的宽度必须等于设备宽度。

Answer 1

您必须采取一些步骤。

首先，您需要知道图像的确切大小以及使用Image.getSize 或Image.getSizeWithHeaders 所做的事情

让我在下面举一个例子。

export interface ImageDetli {
  width: number;
  height: number;
  url: string;
}

const ImageRenderer = ({
  url
}: {
  url: string
}) => {
  const [windowWidth, setWindowWidth] = useState(Dimensions.get("window").width);
  const [windowHeight, setWindowHeight] = useState(Dimensions.get("window").height);
  const [loading, setLoading] = useState(true); // untill we load the image fully
  const [image, setImage] = useState(undefined as ImageDetli | undefined)
  const getSize = async(url: string) => {

    return new Promise((resolve, reject) => {
      // this is very imported so you can keep an eye on the size of the image
      Image.getSize(url, (width, height) => {
        resolve({
          url: url,
          width: width > windowWidth ? windowWidth : width,
          height: height > windowHeight ? windowHeight : height
        });
      }, async(error) => {
        console.log("image not loaded: " + url);
        console.log(error)
        resolve(undefined);

      })
    }) as Promise <ImageDetli | undefined>
  }

  useEffect(() => {
    (async() => {
      var imageDetali = await getSize(url);
      if (!imageDetali){
        // load an empty Image or somthing
      }else {
        setImage(imageDetali);
      }
      setLoading(false)
    })();
  }, [])


  return (
  <>
  {loading?(<ActivityIndicator size="large"color="#0000ff"/>)
  :
  (
  <View style={{ width: "100%", height: "100%", alignItems: "center", 
  justifyContent: "center" }}>
  <Image source={{uri: image.url}}
  style={{ width:image.width, height image.height, resizeMode: "contain" }} />
 </View>
  )}
  </>
  )
}

我希望你明白这一点，你可能会问你是否需要了解更多。