React Native - 精确拟合元素

Posted 2023-02-22

【中文标题】React Native - 精确拟合元素

【英文标题】：React Native - Fitting elements precisely

【发布时间】：2020-01-26 03:41:17

【问题描述】：

任何人都可以向我解释这个布局难题/请提出更好的方法：

我有一个动态图像数组和一个“添加照片”按钮，它们以相等的宽度排列成行 - 我希望缩略图/按钮的宽度/高度完全相同，并在整个块中显示为 3。这是一张照片 -

这里是布局代码：

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

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

以下是相关样式： const itemWidth = (Dimensions.get('window').width / 3) -30;

imgThumbnailBlock: 边距：8， 宽度：项目宽度， 高度：项目宽度， 位置：'相对'， , img缩略图： 背景颜色：'#f79431', 宽度：项目宽度， 高度：项目宽度，

,

imgThumbnailBtn:

width:25,
height:25,

, imgThumbnailWrap： 弹性：1， flexDirection: '行', justifyContent: 'flex-start', flexWrap:'换行', 边距顶部：15， marginBottom:15, 边距左：15， marginRight:15,

, imgThumbAddMore: 宽度：项目宽度， 高度：项目宽度， 边距：8， 背景颜色：'#e9e9e9', alignItems：'中心'， justifyContent: '中心',

,

您可以看到图像容器 (imgThumbnailBlock:) 并添加更多按钮容器 imgThumbAddMore 具有由 itemwidth 计算提供的应用宽度/高度。 const itemWidth = (Dimensions.get('window').width / 3) -30;

我的 iphone 的可用宽度为 375 - 如果我将每个项目除以 3 - 将每个项目的边距（我想要 10 个边距）减去每个项目的 30 除以 3 的容器填充- 从上面的每个宽度中减去 30。这提供了每个块的宽度为 95，应用了 10 个边距和容器填充，这加起来为 375 - 所以一切都应该完全适合。 但是当我应用这个时，第三项落在第二行。我需要将边距值降低到晚上 8 点，以让一切都适合 - 这对我来说是零意义 - 可以提出建议/解释吗？

【参考方案1】：

其实应该是这样的，我给你准备了一个Expo Snack：

https://snack.expo.io/@moritzw1/image-grid-fitting

所以我猜你的顶层之外还有一些东西

<View style=PhotoStyles.imgThumbnailWrap>

这会导致视图缩小（如边框、填充或边距）。

【讨论】：

感谢@mortizw。我仍然不明白额外的像素是从哪里来的——所以我基本上按照上述过程废弃并重建了它们的布局，它工作正常！为你的帮助干杯..