Question

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

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

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

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

问题：

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

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

渲染的内容：（这是使用此布局样式渲染的内容，Image占据了View的大约10％并被截断。剩余的三个TextInput占据了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

看起来像the source的react-native-floating-label-test-input会将您传递给它所维护的// if you run Enzyme tests then you probably already have this import which creates global.window object import 'jsdom-global/register' global.window.localStorage = {};的样式道具应用于与TextInput不同的行为。如果flex属性已应用于外部容器View。

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

编辑：还值得注意的是，该软件包does have flex: 1 set中的View容器可能会引起一些令人头疼的问题，除非您将它们嵌套在自己的View中您可以控制height和/或flex。

Answer 2

我不太确定我会在这里得到你想要达到的目的，但是看看那个2/4图像和2/4 textinput，并从这一行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,
  },
});

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

2 个答案: