Question

我有以下设计：

<View style={{flexDirection: "column", justifyContent: "space-around", alignItems: "center", flex: 1}}>
  <TopElement style={{position: "absolute", top:5}}/>
  <Image key={1}/>
  <Image key={2}/>
  ...
  <Image key={n}/>
  <BottomElement style={{position: "absolute", bottom:5}}/>
</View>

我的n图片太大，无法容纳包装容器（例如我的屏幕）。是否可以在不触及TopElement和BottomElement当前尺寸的情况下调整它们的大小（保持纵横比）？我希望那些坚持在容器的边界。

我不确定是否有内置函数，如果使用Layout FlexBox props是解决方案，或者可能根据屏幕高度手动计算每个Image的维度，或者可能添加另一个View来包装它们。。？

Answer 1

您可以按照以下方式执行此操作：

<View style={{flexDirection: "column", justifyContent: "space-around",
      alignItems: "center", flex: 1, paddingTop: 30, paddingBottom: 30}}>
  <TopElement style={{position: "absolute", top:5}}/>
  <Image resizeMode="contain" style={{flex: 1}} key={1}/>
  ...
  <Image resizeMode="contain" style={{flex: 1}} key={n}/>
  <BottomElement style={{position: "absolute", bottom:5}}/>
</View>

使用paddingTop＆amp;父paddingBottom上的<View />，<TopElement />和<BottomElement />的高度。使顶部/底部不会与图像重叠。
将<Image />道具resizeMode设为'contain'。保持原始宽高比，使图像自动调整大小。

自动调整N个图像的大小以适合容器

1 个答案: