css - 如何使用 flex box 均匀分布 Image 和子元素？

Question

我正在向 <View> 添加图像和一些文本输入 (FloatLabelTextInput)在 react native 应用程序中。到目前为止，我在使用 flex 将图像和文本输入均匀分布在 y 轴上时运气不佳。属性(property)。由于图像显示的高度太小，剩余的 FloatLabelTextInput 在 y 轴上占据了太多高度。

我已经在 Expo react-native 沙箱中测试并模拟了应用程序的 View ，以供引用:

• 1 图片被截断，文字输入占高: https://snack.expo.io/rydGFtHQG

• 2 图片显示正确，但 ext inputs 占用了太多高度: https://snack.expo.io/HyS1VYU7f

我确实尝试过将 flex 属性设置为整体 flex 的一部分，但这不会调整 View 中元素间距的宽度或高度。

问题:

如何使用 flex box 均匀分布图像和子元素？

建议的布局:(这是我的目标布局，图像占据整个 View 宽度和 40% 高度以显示完整图像，而图像下方的三个 TextInputs 又占据了 40%高度为 20px)

渲染的内容:(这是用这种布局风格渲染出来的，Image占了大约10%的View，被截掉了。而剩下的三个TextInputs占了大约50%的View和每个高度约 50 像素，对于此布局来说太高了。

View 样式定义:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:"column",
    //alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#ecf0f1'
  },
  image: {
    flex: 2/4,
    resizeMode: 'contain',
    width: 800,
    height: 800,
  },
  floatLabelTextInput: {
    flex: 2/4,
    padding: 8,
  },
});

Answer 1

看起来像the source react-native-floating-label-test-input 的 style props 你传递给它维护的 TextInput ，它的行为将不同于 flex 属性被应用到外部容器 View.

我猜你实际上并不希望 TextInput 是那个大小，因为它会导致输入与图像大小相同。如果我正在处理这个，我可能会给我的输入一个固定的高度，然后对图像应用一个 flex 样式。或者，如果我知道图像的大小，我也可以给它一个固定的大小。

编辑:还值得注意的是，该包中的 View 容器 does have flex: 1 set这可能会引起一些麻烦，除非您将它们嵌套在您自己的 View 中，您可以在其中控制 height 和/或 flex。