React native 反应本机-如何使图像宽度100%和垂直顶部？

我是react native的新手。 我想做的是在设备中安装一个图像，并保持图像的比例。我只想让

宽度：100%

我搜索了如何制作它，似乎

resizeMode='contain'

很适合这样做

但是，由于我使用了

resizeMode='contain'

，因此图像保持了我不希望的垂直居中位置。 我希望它垂直向上

我试图使用一个插件，例如，但没有运气

我发现了。 但我仍然不知道怎么做

那么，我的问题是，处理这种情况的最佳方式是什么

我是否必须手动设置每个图像的宽度和高度

我想：

• 保持图像的比例
• 垂直顶部定位

React本机测试代码：

最终我想做的是：

---

谢谢。

图像垂直居中，因为您已将

flex:1

添加到样式属性中。不要添加flex:1，因为这样会将图像填充到其父图像中，这在本例中是不需要的

您应该始终在React Native中的图像上添加高度和宽度。如果图像总是相同的，可以使用

Dimensions.get（'window'）.width

计算图像的大小。例如，如果比率始终为16x9，则高度为图像宽度的9/16。宽度等于设备宽度，因此：

const dimensions=dimensions.get（'window'）；
常量图像高度=数学圆（尺寸宽度*9/16）；
常量imageWidth=尺寸。宽度；
返回(
);

注意：当使用这样的实现时，在旋转设备、使用拆分屏幕等时，图像不会自动调整大小。如果您支持多个方向，您还必须注意这些操作…

如果比率不相同，则根据每个不同图像的比率动态更改9/16。如果你真的不介意图像有点被裁剪，你也可以使用固定高度的封面模式：（）

---

也来试试看

您还可以等待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}）；
返回样式表。展平（样式）；
};
}

---

这将更新图像的尺寸以匹配屏幕的宽度。

您可以将此样式应用于图像： 如果将

imageStyle

应用于

Image

标记，则图像宽度将为100%，图像高度将为300

imageStyle:{
height:300,
flex:1,
width:null
}

假设您的图像代码为：

<Image style={imageStyle} source={{uri:'uri of the Image'}} />

---

右键单击图像以获得分辨率。就我而言1233 x 882

const { width } = Dimensions.get('window');

const ratio = 882 / 1233;

    const style = {
      width,
      height: width * ratio
    }

<Image source={image} style={style} resizeMode="contain" />

const{width}=Dimensions.get（'window'）；
常数比=882/1233；
常量样式={
宽度，
高：宽*比
}

---

谢谢你的回答。所以我必须知道图像大小并使用尺寸来控制图像大小。在你的世博会示例中，为什么要将宽度设置为“100%”？我认为它不起作用。100%只适用于较新版本的React-Native（如果我没有记错的话，从0.43开始）未来的访问者，当设备旋转时，使用

维度

会失败得很惨。您需要绑定方向更改和反转宽度/高度。这不是一个优雅的解决方案。RN应该处理得更好。看看当我添加null时，它使图像消失了。