方形图像的React本地使用百分比

Question

我使用的是react native，并试图创建一个占屏幕宽度固定百分比的图像。但是，这个图像也必须是一个正方形。通常在创建正方形图像时，我只会用图像的样式来写：

image: {
width: 200,
height: 200,
},

这将创建一个200 x 200的图像。我尝试使用这样的百分比：

image: {
width: 50%,
height: 50%,
},

然而，这显然会在宽度和高度方面缩放图像。如何通过x使图像成为x图像，其中x-是屏幕宽度的百分比。例如，如果屏幕是400像素宽，我想要一个200乘200的图像。

Answer 1

您可以使用Dimensions来计算图像的大小

const _width  = Dimensions.get('screen').width * 0.5

然后使用

image: {
width: _width,
height: _width,
},