如何使用弹性框均匀分布图像和子元素？

Question

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

我已经在 Expo react-native 沙箱中测试并模拟了应用程序的视图，以供在此处使用我使用的相同 CSS 进行参考：

• 1 图像截断和文本输入占用过多高度： https://snack.expo.io/rydGFtHQG

• 2 图像显示正确，但 ext 输入占用过多高度： https://snack.expo.io/HyS1VYU7f

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

问题：

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

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

渲染的内容：（这是使用这种布局样式渲染的内容，Image 占 View 的 10% 左右，被截断。而剩下的三个 TextInput 占 View 的 50% 左右，并且每个高度约 50 像素，对于此布局来说太高了。

查看样式定义：

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

看起来 react-native-floating-label-test-input 的 the source 将您传入的样式道具应用到它维护的 TextInput 中，这将与 flex 属性的行为不同应用于外容器View。

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

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

Answer 2

我不太确定我是否得到了你想要在这里实现的目标，但是看看那个 2/4 图像和 2/4 文本输入，以及从这一行 So far I'm not having much luck spacing the image and text inputs evenly on the y-axis 我相信您希望图像占据行的 50%，而 3 个文本输入共同占据剩余的 50%。

您可以从react-native 导入Dimensions 并执行
const ScreenWidth = Dimensions.get('window').width;
然后用maxWidth防止图片太大

这是我的代码的 SnackExpo。 https://snack.expo.io/HJXemkUXM

也许你可以在油漆或其他东西上做一个速写，向我们展示你想要的东西在哪里以及你想要它的外观。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    // alignItems: 'center',
    // justifyContent: 'space-between',
    backgroundColor: 'lightgreen',
    maxWidth: ScreenWidth,
    paddingTop: 25,
  },
  image: {
    maxWidth: ScreenWidth*0.50,
    height: 200,
    // flex: 2/4,
    // resizeMode: 'contain',
    // width: 800,
    // height: 800,
  },
  floatLabelTextInput: {
    // flex: 2/4,
    // padding: 8,
  },
});