自动调整n张图像以适合容器

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当前尺寸的情况下调整它们的大小（保持纵横比）吗？我希望那些粘在容器的边界上。

我不确定是否存在内置功能，如果使用布局Flexbox道具是解决方案，或者可能会根据屏幕高度手动计算每个图像的尺寸，或者添加其他视图以包装所有图像...？

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>

1. 使用paddingTop＆amp; paddingBottom在父 <View />上，高度为 <TopElement />和 <BottomElement />。使顶/底部不会与图像重叠。

2. 将<Image /> prop resizeMode设置为'contain'。使图像自动调整大小，以保持原始纵横比。