Използвайте flexbox за изграждане на гъвкави и отзивчиви оформления в React Native.
Flexbox е CSS инструмент, който ви позволява да създавате гъвкави едноизмерни оформления. Позволява ви да контролирате позицията на елементите в контейнер, така че да имате повече контрол върху представянето на вашето съдържание на екрана.
Този урок демонстрира как да използвате flexbox в React Native за изграждане на гъвкави и отзивчиви оформления. Ще научите как да позиционирате дъщерни елементи на контейнерен елемент, като използвате свойствата на flexbox.
Сравняване на поведението на Flexbox в React Native и уеб разработка
Ако искате да организирате съдържанието на контейнерния елемент с помощта на flexbox в обикновен CSS, трябва да използвате дисплей: гъвкав Имот.
контейнер { дисплей: гъвкав; }Но с React Native не е необходимо да задавате дисплей: гъвкав Имот. Това е така, защото React Native използва flexbox по подразбиране за изграждане на оформления.
Ето някои разлики, които трябва да имате предвид как се държи flexbox, когато се използва за подравняване на HTML елементи
в уеб приложения спрямо това как се държи в React Native:- flexDirection по подразбиране ред в уеб приложения, но по подразбиране колона в React Native.
- alignContent по подразбиране опъвам, разтягам в уеб приложения и гъвкав старт в React Native.
- flexShrink по подразбиране е 1 в уеб и 0 в React Native.
Използване на свойства на Flexbox в React Native
Свойствата на Flexbox ви позволяват да опишете как да подравните дъщерните елементи на контейнерния елемент. Трябва да разберете тези свойства, за да създадете сложни оформления, които отговарят на нуждите на вашето приложение.
1. Използване на свойството flex в React Native
The flex собствеността определя как Преглед компонент запълва екрана. Това свойство приема целочислена стойност, по-голяма или равна на 0. Стойността указва частта от екрана Преглед компонентът трябва да заема.
В този пример вие създавате екран с един изглед от React Native библиотека с компоненти:
импортиране Реагирайте от"реагира"
импортиране {Стилова таблица, изглед} от"реагиране-роден"
износпо подразбиранефункцияПриложение() {
връщане (
<>backroundColor: "#A020F0", flex: 1}} />
</>
)
}
Ето изхода:
Тук сте задали 1 като гъвкава стойност на Преглед компонент. The Преглед компонентът заема целия екран (100%), защото сте разделили пространството на една група.
Нека да разгледаме друг пример:
импортиране Реагирайте от"реагира"
импортиране {Стилова таблица, изглед} от"реагиране-роден"
износпо подразбиранефункцияПриложение() {
връщане (backroundColor: "#A020F0", flex: 1}} /> Цвят на фона: "#7cb48f", flex: 3 }} />
</View>
)
}
Ето резултата:
Ето ви две Преглед елементи в друг Преглед елемент. Първото дете е настроено на гъвкавост: 1, а вторият е настроен на гъвкавост: 3. Тези ценности разделят пространството между двете деца. Първият заема 1/4 от екрана, докато вторият заема 3/4 от екрана (Екранът е разделен на 4 блока, защото 1+3 = 4).
2. Използване на свойството flexDirection в React Native
Ако погледнете екранната снимка по-горе, ще видите, че дъщерните елементи са един върху друг. Това е поведението по подразбиране на flexbox в React Native (flexDirection по подразбиране е колона стойност).
Можете също да зададете flexDirection собственост към ред, колона-реверс, и ред-обратен. В следния пример flexDirection е настроен на ред, следователно дъщерните елементи се поставят един до друг:
импортиране Реагирайте от"реагира"
импортиране {Стилова таблица, изглед} от"реагиране-роден"конст стилове = StyleSheet.create({
контейнер: {
Цвят на фона: "#00FF00",
гъвкав: 1,
подравняване на елементи: "център",
flexDirection: "ред",
},
квадрат: {
Цвят на фона: "#FF0000",
ширина: 98,
височина: 98,
марж: 4,
},
});
износпо подразбиранефункцияПриложение() {
връщане (
</View>
)
}
Ето резултата:
Настройка на flexDirection да се ред-обратен поставя децата едно до друго, но обръща реда. По същия начин, на колона-реверс поставя децата едно върху друго, но в последователност, обратна на определената от колона.
3. Използване на justifyContent в React Native
The justifyContent подравнява дъщерните елементи на контейнер flexbox по основната ос. Ако flexDirection е настроен на колона, тогава основната ос е вертикалната ос. Ако е настроено на ред, тогава е хоризонтално.
Възможните стойности на justifyContentса гъвкав старт, гъвкав край, център, интервал между, пространство-около, и пространство-равномерно.
В следния пример flexDirection е настроен на ред и justifyContentе настроен на гъвкав старт:
импортиране Реагирайте от"реагира"
импортиране {Стилова таблица, изглед} от"реагиране-роден"конст стилове = StyleSheet.create({
контейнер: {
Цвят на фона: "#00FF00",
гъвкав: 1,
justifyContent: "гъвкав старт",
flexDirection: "ред",
},
квадрат: {
Цвят на фона: "#FF0000",
ширина: 98,
височина: 98,
марж: 6,
},
});
износпо подразбиранефункцияПриложение() {
връщане (
</View>
)
}
Ето изхода:
Ако промените flexDirection да се колона, гъвкав старт ще се приложи към вертикалната ос. Така че кутиите ще бъдат подредени една върху друга.
Настройка justifyContent към центъра (докато основната ос е a колона) центрира трите дъщерни кутии.
4. Използване на alignItems в React Native
The alignItems свойство определя разположението на елементи в контейнер flexbox по вторичната ос. Това е обратното на justifyContent. Точно като justifyContent грижи се за вертикалното подравняване, alignItems управлява хоризонталното подравняване. Възможните стойности на alignItems са гъвкав старт, гъвкав край, център, и базова линия.
В следния пример flexDirection е настроен на ред и alignItemsе настроен на гъвкав старт:
импортиране Реагирайте от"реагира"
импортиране {Стилова таблица, изглед} от"реагиране-роден"конст стилове = StyleSheet.create({
контейнер: {
Цвят на фона: "#00FF00",
гъвкав: 1,
подравняване на елементи: "гъвкав старт",
flexDirection: "ред",
},
квадрат: {
Цвят на фона: "#FF0000",
ширина: 98,
височина: 98,
марж: 6,
},
});
износпо подразбиранефункцияПриложение() {
връщане (
</View>
)
}
Ето изхода:
Ако зададете flexDirection собственост към колона и alignItems да се център, кутиите ще бъдат поставени една върху друга, а дъщерните елементи ще бъдат центрирани.
5. Използване на alignSelf в React Native
The alignSelf свойство определя как отделно дете трябва да се подреди в контейнера. Той отменя alignItems, а възможните стойности са гъвкав старт, гъвкав край, център, и базова линия.
В следващия пример задаваме стойност по подразбиране alignItems свойство и го заменете с помощта на alignSelf:
импортиране Реагирайте от"реагира"
импортиране {Стилова таблица, изглед} от"реагиране-роден"конст стилове = StyleSheet.create({
контейнер: {
Цвят на фона: "#00FF00",
гъвкав: 1,
подравняване на елементи: "център",
justifyContent: "център",
flexDirection: "ред",
},
квадрат: {
Цвят на фона: "#FF0000",
ширина: 98,
височина: 98,
марж: 6,
},
});
износпо подразбиранефункцияПриложение() {
връщане (alignSelf: "гъвкав край" }]} /> alignSelf: "гъвкав старт" }]} />
)
}
Ето резултата:
Други свойства на Flexbox
Има две други свойства, които можете да използвате, когато създавате оформление на flexbox в React Native:
- flexWrap: В случай, че децата на контейнер прелеят от него. Използвайте flexWrap за да укажете дали те трябва да бъдат свити на един ред или обвити в няколко реда. Възможни стойности за flexWrap са Nowrap и обвивам.
- празнина: Вие използвате празнина свойство за добавяне на празнини между елементите на мрежата в контейнера. Стойността му трябва да бъде размера на празнината, която искате между елементите. Можете да посочите празнина Имот използвайки CSS единици като px, em или rem.
Научете повече за React Native
Сега, след като разбирате flexbox и знаете как да го използвате във вашето приложение React Native, за да създавате гъвкави и отзивчиви оформления, е време да навлезете в тънкостите на React Native.
