我有一个关于标签的查询。我想要一个图像来获取父级的整个宽度，我使用对齐自己：拉伸来做，但是我也希望高度是根据图像的长宽比来的。我如何才能实现这样的事情？
所以我想要一种方法来指定高度作为图像宽度的比率。
对宽高比为3:2的水平图像使用style={{aspectRatio：3/2}}。
文档：https://reactnative.dev/docs/layout-props#aspectratio
（RN0.40）
<Image
source={require('../../assets/img/headers/image-1.jpg')}
style={styles.responsiveImage}
/>
const styles = StyleSheet.create({
responsiveImage: {
width: '100%',
// Without height undefined it won't work
height: undefined,
// figure out your image aspect ratio
aspectRatio: 135 / 76,
},
});
我喜欢bdv的方法，我在我的应用程序中几乎到处都使用这种图像。这就是为什么我创建了一个自己的组件，它使用onLayout来支持设备旋转。
import resolveAssetSource from "resolveAssetSource";
import React, { useCallback, useState } from "react";
import { Image, View } from "react-native";
export default function FullWidthImage(props) {
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const onLayout = useCallback((event) => {
const containerWidth = event.nativeEvent.layout.width;
if (props.ratio) {
setWidth(containerWidth);
setHeight(containerWidth * props.ratio);
} else if (typeof props.source === "number") {
const source = resolveAssetSource(props.source);
setWidth(containerWidth);
setHeight(containerWidth * source.height / source.width);
} else if (typeof props.source === "object") {
Image.getSize(props.source.uri, (w, h) => {
setWidth(containerWidth);
setHeight(containerWidth * h / w);
});
}
}, [props.ratio, props.source]);
return (
<View onLayout={onLayout}>
<Image
source={props.source}
style={{ width, height }} />
</View>
);
}
你可以这样使用它：
<FullWidthImage source={{ uri: "http://example.com/image.jpg" }} />
<FullWidthImage source={require("./images/image.jpg")} />
或者如果你知道这样的比例：
<FullWidthImage source={{ uri: "http://example.com/image.jpg"}} ratio={0.5} />
<FullWidthImage source={require("./images/image.jpg")} ratio={0.5} />
