React Native, выравнивая взгляды по вертикали, не устанавливая для него значение
Экспериментирую с экраном входа: https://snack.expo.io/@lucaszanella/login-screen-test-zanella
(некоторые источники изображений были удалены, потому что я не могу загрузить их в закуску, а другие я изменил на случайные изображения с URL-адреса)
Откройте login_screen/components/Form.js. Как видите, входы UserInput и кнопка SubmitButton разнесены, но я не говорил им об этом. Я уже пробовал все свойства justifyContent, и они даже не перемещают компоненты. Похоже, они оправданы (даже не в равной степени).
Что происходит? Если вы знаете какое-то понятие о flexbox, которое я ошибаюсь, сообщите мне.
@TimH flex 7 должен был использоваться только для формы. Почему за ним следуют и вещи внутри формы? Кроме того, если я помещу 3 объекта внутрь <View style = {{flex: 1}}>, они останутся разнесенными. Почему?
Ответы 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 будут в равной степени разделять (и заполнять) гибкую область (7/11), которую Form получил от своего родителя. Вот почему вы видите пространство между UserInput. Чтобы лучше понять это, попробуйте заменить UserInput на простые View с другим цветом фона, и вы увидите, что происходит.
Решение: Уменьшите flex на Form и при необходимости примените поля.
РЕДАКТИРОВАТЬ
В качестве альтернативы вы можете установить фиксированный height (в случае родительского flexDirection:'column') или width (в случае родительского flexDirection:'row') для потомков.
Надеюсь это поможет.
Почему же тогда это не сработает, если я помещу 3 объекта в <View style = {{flex: 1}}>? Тот факт, что дочерние элементы flexbox разделяют пропорции, очень странный, не должно быть так
Что не работает внутри View style = {{flex:1}}? А разрешение детям разделять гибкую область в пропорциях - вот как работает гибкий бокс, это основная идея гибкого бокса, отсюда и название. Если вы этого не хотите, вы можете, в качестве альтернативы, дать фиксированный height или width детям (в зависимости от flexDirection родителя).
Кроме того, обратитесь к последней строке вашего вопроса. @TimH, и я только попытался объяснить концепцию flexbox, которая не была применена в коде.
Я не вижу причин для justifyContent: "flex-start" не работает внутри формы.
Думаю, я знаю, почему для меня это звучало очень странно, что дети всегда отстраняются. Это происходит только в том случае, если они гибкие. Они мне не нужны, это была просто случайность. Вы сказали в основном это, но я не понял. Я просто снял с них шлейф и все заработало. Спасибо
Вы передаете
flex: 7в свою форму. Вот почему они расположены друг от друга.