垂直反应本机对齐视图而无需将其设置为 [英] React Native justifying views vertically without me setting it to

问题描述

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

I'm experimenting a login screen: https://snack.expo.io/@lucaszanella/login-screen-test-zanella

(某些图片来源已删除，因为我无法将其上传到零食，而其他图片来源则从url更改为随机图片)

打开login_screen/components/Form.js.好了，如您所见，UserInput输入和SubmitButton按钮是隔开的，但我没有告诉他们这样做.我已经尝试了所有justifyContent属性，它们甚至不移动组件.看起来他们是有道理的(甚至不平等).

Open login_screen/components/Form.js. Well, as you see, the UserInput inputs and SubmitButton button are spaced, but I didn't tell them to. I already tried all justifyContent properties and they don't even move the components. Looks like they are justified (not even equally).

这是怎么回事?如果您知道关于flexbox的一些概念，但我错了，请告诉我.

What is going on? If you know some concept about flexbox that I'm getting wrong please tell me.

推荐答案

flexbox的孩子按比例共享父级的弹性区域.您已将Logo设置为flex:3，将Form设置为flex:7，并且将SignupSection设置为flex:1.因此，7 + 3 + 1 = 11，因此，Logo占3/11，Form占7/11，而SignupSection占父母在指定方向上的弹性区域的1/11.

Children of a flexbox share the parent's flex area in proportions. You have set Logo to flex:3, Form to flex:7, and SignupSection to flex:1. Thus, 7 + 3 + 1 = 11, therefore, Logo takes 3/11, Form takes 7/11, and SignupSection takes 1/11 of the parent's flex area in the specified direction.

在Form中，您已将UserInput设置为flex: 1.因此，Form的子级(UserInput)将平均共享(并填充)Form从其父级那里获取的弹性区域(7/11).这就是为什么您看到UserInput之间的空格的原因.为了更好地理解这一点，请尝试用具有不同背景颜色的简单View替换UserInput，您会看到发生了什么事.

Within Form, you've set UserInput to flex: 1. So the children (UserInput) of Form will equally share (and fill up) the flex area (7/11) that Form has acquired from its parent. This is why you see the space between UserInputs. To understand this better, try replacing UserInputs with simple Views with different background colors and you'll see what's going on.

解决方案:减少Form上的flex并根据需要应用边距.

Solution: Reduce flex on Form and apply margins if required.

编辑

或者，您可以为孩子设置固定的height(对于父级flexDirection:'column')或width(对于父级flexDirection:'row').

Alternatively, you can set fixed height (in case of flexDirection:'column' of parent) or width (in case of flexDirection:'row' of parent) to the children.

希望这会有所帮助.

这篇关于垂直反应本机对齐视图而无需将其设置为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！