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

Question

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

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

• 1图像被切断，文字输入占用太多高度：https://snack.expo.io/rydGFtHQG
• 2图像显示正确，但输入输入占用太多高度：https://snack.expo.io/HyS1VYU7f

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

题：

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

建议的布局:(这是我的目标布局，图像占据全视图宽度，40％高度显示完整图像，而图像下方的三个TextInputs占据40％，高度为20px）

渲染的内容:(这是使用此布局样式渲染的内容，Image占据View的大约10％并被截断。剩余的三个TextInputs占据View的约50％和高度约50px，这对于这个布局。

查看样式定义：

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

我不太确定我得到你想要在这里实现的目标，但是看看那个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％的其余部分。

你可以从Dimensions导入react-native并做 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,
  },
});

Answer 2

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

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

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