React native 保持图像的纵横比，使其保持全宽

我有一个关于标签的问题。我希望一个图像能够获取父对象的整个宽度，这是我使用alignSelf:stretch所做的，但我也希望高度与图像的纵横比一致。我怎样才能做到这一点

---

因此，我需要一种方法，将高度指定为图像宽度的比率。

您可以使用以下方法：

---

请注意，您仍然需要在视图容器上设置高度。

通常，执行以下操作会根据方向将图像渲染为最大宽度/高度，同时保持图像本身的纵横比：

render（）{
return（您可以根据宽高比计算图像高度

因此，如果图像最初是200x100，在将其resizeMode设置为stretch后：

var-deviceWidth:Dimensions.get（'window'）.width；
...
我的形象{
宽度：设备宽度，
高度：设备宽度*0.5
}

我知道这可能不是最好的做法，但它在处理各种大小的图像时帮了我很大的忙，这些图像需要与其他图像保持一定的关系，等等。
其实很简单

Image
类有一个
getSize
方法。[1]

假设您已经为
aspectRatioImage
创建了一个组件，并且每次
componentWillMount
激发时都会计算相应的值

然后，您的代码将如下所示：

componentDidMount（）{
Image.getSize（this.props.source.uri，（srcWidth，srcHeight）=>{
const maxHeight=Dimensions.get（'window'）.height；//或其他内容
const maxWidth=Dimensions.get（'window'）.width；
常数比=数学最小值（maxWidth/srcWidth，maxHeight/srcHeight）；
this.setState（{width:srcWidth*ratio，height:srcHeight*ratio}）；
}，错误=>{
console.log（'error:'，error）；
});
}

因此，现在图像的高度和宽度已保存在组件的状态中，您只需运行



[1] -
您可以使用。以下示例将完成此工作：

从“React”导入React；
从“react native”导入{Dimensions}；
从“react native scalable Image”导入图像；
常量图像=；
我喜欢bdv的方法，我在我的应用程序中几乎到处都使用这种图像。这就是为什么我创建了一个自己的组件，它使用
onLayout
来支持设备旋转


从“resolveAssetSource”导入resolveAssetSource；
从“React”导入React，{Component}；
从“react native”导入{Image，View}；
导出默认类FullWidthImage扩展组件{
构造函数（）{
超级（）；
此.state={
宽度：0，
身高：0
};
}
_仅限外展（活动）{
const containerWidth=event.nativeEvent.layout.width；
如果（本道具比率）{
这是我的国家({
宽度：集装箱宽度，
高度：集装箱宽度*this.props.ratio
});
}else if（typeof this.props.source=='number'）{
const source=resolveAssetSource（this.props.source）；
这是我的国家({
宽度：集装箱宽度，
高度：containerWidth*source.height/source.width
});
}else if（typeof this.props.source==='object'）{
Image.getSize（this.props.source.uri，（宽度、高度）=>{
这是我的国家({
宽度：集装箱宽度，
高度：集装箱宽度*高度/宽度
});
});
}
}
render（）{
返回(
);
}
}
我尝试了Image.getSize方法，但遇到了问题，因为我们在一个配置文件中收集了所有图像链接，然后将ImageURISource传递到图像的源属性中

我的解决方案是等待Image onLayout回调获取其布局属性并使用该属性更新维度。我为此创建了一个组件：

import*as React from'React'；
从“react native”导入{Dimensions、Image、ImageProperties、LayoutChangeEvent、StyleSheet、ViewStyle}；
导出接口FullWidthImageState{
宽度：数字；
高度：数字；
拉伸：布尔；
}
导出默认类FullWidthImage扩展React.Component{
构造函数（道具：ImageProperties）{
超级（道具）；
this.state={宽度：100，高度：100，拉伸：false}；
}
render（）{
返回；
}
private resizeImage=（事件：LayoutChangeEvent）=>{
如果（！this.state.extended）{
const width=Dimensions.get（'window'）.width；
常量高度=宽度*event.nativeEvent.layout.height/event.nativeEvent.layout.width；
this.setState（{宽度，高度，拉伸：true}）；
}
};
私有getStyle=（）：视图样式=>{
conststyle=[StyleSheet.flant（this.props.style）]；
push（{width:this.state.width，height:this.state.height}）；
返回样式表。展平（样式）；
};
}

这将更新图像的尺寸以匹配屏幕的宽度。
对于宽高比为3:2的水平图像，使用
style={{aspectRatio:3/2}

文件：

（以RN 0.40+版本提供

const styles=StyleSheet.create({
响应图像：{
宽度：“100%”，
//没有未定义的高度，它将无法工作
高度：未定义，
//计算出你的图像纵横比
专题：135/76，
},
});
在我的情况下，我还必须将高度设置为“自动”：

{
    width: 200,
    height: 'auto',
    aspectRatio: 16 / 9,
}

使用
resizeMode='contain'

<Image style={{height:'100%', width:'100%'}} resizeMode="contain" source={{uri:this.state.imgSource}} />



这将保持原始纵横比，给定的宽度和高度为最大高度和最大宽度。
在我的例子中，我在我的React Native（v0.62+）项目中使用

我需要为
Image
组件指定一个正方形
aspectRatio