React Native垂直对齐视图而不将其设置为

Question

我正在尝试登录屏幕：https://snack.expo.io/@lucaszanella/login-screen-test-zanella

（删除了一些图片来源，因为我无法将其上传到小吃，而其他人则将其更改为来自网址的随机图片）

打开login_screen/components/Form.js。好吧，如您所见，UserInput输入和SubmitButton按钮间隔开，但我没有告诉他们。我已经尝试了所有justifyContent属性，但他们甚至不会移动组件。看起来他们是合理的（甚至不是平等的）。

发生了什么事？如果你知道关于flexbox的一些概念我会出错，请告诉我。

Answer 1

flexbox的儿童按比例分享父母的弹性区域。您已将Logo设置为flex:3，将Form设置为flex:7，将SignupSection设置为flex:1。因此，7 + 3 + 1 = 11，因此，Logo需要3/11，Form需要7/11，SignupSection需要父亲的1/11指定方向的区域。

在Form内，您已将UserInput设置为flex: 1。因此UserInput的孩子（Form）将平等地分享（并填充）Form从其父母那里获得的弹性区域（7/11）。这就是为什么你看到UserInput之间的空格。要更好地理解这一点，请尝试使用不同背景颜色的简单UserInput替换View s，然后您就会看到正在发生的事情。

解决方案：减少flex上的Form并根据需要应用保证金。

修改

或者，您可以为孩子设置固定的height（如果是父母的flexDirection:'column'）或width（如果是父母的flexDirection:'row'）。

希望这有帮助。