React Native - 响应式图像宽度（百分比？）

Posted 2023-02-25

【中文标题】React Native - 响应式图像宽度（百分比？）

【英文标题】：React Native - Responsive image widths (percentages?)

【发布时间】：2019-09-24 17:01:09

【问题描述】：

我在 RN 应用程序中构建了一个响应式照片网格 -

我希望 3 张图片适合屏幕，并带有相应的边距。所有图像都是正方形。

我正在寻求一些关于实现这一点的最佳方法的提示 - 我会在网络构建中为每个图像方块使用百分比，但我知道这在 RN 中是不可能的......

这是我目前所拥有的： 该代码基本上是通过 map 函数将图像从数组中拉出，并在它们之后添加相同大小的灰度图像上传按钮，如下所示：

     <View style=PhotoStyles.imgThumbnailWrap>
            this.state.ADImageArray.map((prop, key) => 

               return (
                  <Image
                    source=uri: prop, isStatic: true
                    style=PhotoStyles.imgThumbnail
                    />
               );
            )
            <TouchableOpacity onPress=this.photoAdditional >
            <View style=PhotoStyles.imgThumbAddMore>
              <Image source=require('../images/icons/ico-upload- 
               photo.png') style=PhotoStyles.imgThumbnailBtn />
            </View>
      </View>

风格如下：

imgThumbnailWrap: 
  flex:1,
  flexDirection: 'row',
  justifyContent: 'flex-start',
  flexWrap:'wrap',
,
imgThumbnail: 
  backgroundColor:'#f79431',
  width:100,
  height:100,
  margin:8,
,
imgThumbAddMore: 
  width:100,
  height:100,
  margin:8,
  backgroundColor: '#e9e9e9',
  alignItems:'center',
  justifyContent: 'center',

,

如您所见，在上面的示例中，两个图像类（imgThumbnail 和 imgThumbAddMore）具有固定宽度 - 我想让它们适应基于父容器宽度的 3 个宽度百分比宽度和高度的行(imgThumbnailWrap)。有什么建议吗？

【参考方案1】：

你可以除以设备的宽度并减去外面的边距

import  Dimensions  from "react-native";

const padding = 10
const itemWidth = (Dimensions.get('window').width / 3) - (padding * 4)

将itemWidth 与宽度和高度一起使用，以获得完美的正方形。

【讨论】：

感谢您的帮助@moritzw - 虽然计算似乎不起作用 - 除非我遗漏了一些东西 - 我的拇指上有 10 个边距 - 所以 3 等于减去 20每个（而不是上面代码中的 40 个）。我已经更改并且它可以工作 - 我的 iPhone 的屏幕宽度为 375，提醒计算的宽度为 105 (x3 + 60 = 375)，这是完美的 - 但如果我将项目边距减少到 8，它们只适合一行一些奇怪的原因......！？

@moitzw - 我会给你的答案打一个绿色勾号 - 因为它 95% 正确并且非常有用 - 我将单独提出另一个问题，因为我认为它与所问的问题不同在上述问题中。非常感谢您的帮助..

【参考方案2】：

这个问题可以通过使用 paddingTop、width 和 position 轻松解决。试试下面的代码。

<View style=width:'100%',paddingTop:'100%'>
  <Image source=uri:url style=position:'absolute',left:0,bottom:0,right:0,top:0,resizeMode:'contain' />
 </View>