React Native - 精确拟合元素

Question

谁能向我解释这个布局难题/请提出更好的方法：

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

这里是相关的 styles: const itemWidth = (Dimensions.get('window').width / 3) -30;

imgThumbnailBlock: { margin:8, width:itemWidth, height:itemWidth, position:'relative', }, imgThumbnail: { backgroundColor:'#f79431', width:itemWidth, height:itemWidth,

},

imgThumbnailBtn：{

width:25,
height:25,

}, imgThumbnailWrap: { flex:1, flexDirection: 'row', justifyContent: 'flex-start', flexWrap:'wrap', marginTop:15, marginBottom:15, marginLeft:15, marginRight:15,

}, imgThumbAddMore: { width:itemWidth, height:itemWidth, margin:8, backgroundColor: '#e9e9e9', alignItems:'center', justifyContent: 'center',

},

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

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

Answer 1

实际上它应该是这样工作的，我为你设置了一个 Expo Snack：

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

所以我猜你的顶级水平之外还有一些东西

<View style={PhotoStyles.imgThumbnailWrap}>

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