В этом примере мы изучим React Native Flexbox Tutorial. Работа с макетом flexbox может быть сложной, особенно в React Native. Нативный компонент React использует flexbox для создания своих дочерних элементов. Flexbox работает в React Native так же, как и в CSS в Интернете, за некоторыми исключениями. Значения по умолчанию разные: для flexDirection по умолчанию используется столбец, а не строка, а параметр flex поддерживает только одно число. Если вы новичок в React Native, ознакомьтесь с информацией ниже.
React Native — Практическое руководство
Учебное пособие по React Native Flexbox.
Сначала мы установим React Native на Mac и затем мы начнем наше руководство.
Шаг 1. Установите React Native.
Выполните следующую команду в Терминале, если вы ранее не устанавливали это. В противном случае пропустите команду ниже.
sudo npm install -g react-native-cli
Используйте Интерфейс командной строки React Native для создания нового проекта React Native под названием « flex «:
react-native init flex
Теперь войдите в эту папку и нажмите следующую команду.
cd flexreact-native run-ios
Для компиляции потребуется некоторое время, затем откроется диспетчер пакетов и откроется симулятор iOS , а в после этого вы увидите экран по умолчанию, как показано ниже.
Шаг 2: Знакомство с Flex Layout.
Хорошо, теперь сначала измените наш Код App.js к приведенному ниже коду. Он находится в корне проекта.
//App.jsimport React, {Component} из 'react'; импорт {StyleSheet, Text, View} из 'react-native'; экспорт по умолчанию class App extends Component {render () {return ( Добро пожаловать в React Native Добро пожаловать в React Native Добро пожаловать в React Native ); }} const styles = StyleSheet.create ({container: {flex: 1, marginTop: 20, backgroundColor: '# F5FCFF',}, добро пожаловать: {flex: 1, margin: 20, backgroundColor: 'orange', margin: 10 , textAlign: 'center', fontSize: 20, paddingTop: 70,}});
Итак, ваш экран выглядит так, как показано ниже.
Теперь мы попытаемся разобраться в свойствах одно за другим.. Итак, вы можете видеть, как работает flex .
Здесь мы использовали два стиля.
- container
- welcome
Наш родительский макет — это макет контейнера, и если мы назначим flex = 1 , то это займет весь доступный экран. Теперь мы удалим элементы и свойства, некоторые элементы и свойства, чтобы увидеть, какие свойства что делают. Напишите файл App.js со следующим кодом.
//App.jsimport React, {Component} из 'react'; import {StyleSheet, Text, Просмотр} из 'react-native'; класс экспорта по умолчанию. Приложение расширяет компонент {render () {return ( ); }} const styles = StyleSheet.create ({container: {flex: 1, backgroundColor: '# F5FCFF',}});
Как мы обсуждали ранее, когда мы назначаем flex = 1 , тогда он займет весь экран. Итак, прямо сейчас весь ваш экран залит этим цветом фона ‘# F5FCFF’ .
Теперь удалите свойство flex, чтобы посмотреть, что произойдет. Цвет фона исчез. Свойство Flex будет определять для контейнера Flex , как он должен управлять пространством вдоль главной оси или как он должен распределять пространство между несколько Flex контейнеров . Итак, если мы установим flex: 1 , тогда контейнер будет расширяться на всю доступную ширину вдоль Main Axis своего родителя. React Native использует ограниченные свойства и значения макета Flexbox . Но этого достаточно, чтобы удовлетворить все ваши требования.
Теперь добавьте стили в контейнер. Таким образом, цвет фона занимает все пространство экрана. Итак, это наш основной контейнер. Хорошо, давайте поговорим о главной оси и поперечной оси.
Главная ось
Контейнер Flex дочерние элементы всегда следуют направлению основной оси родительского контейнера и, изменяя направление гибкости , мы меняем направление Main Axis . Главная ось означает, что в математике это ось Y или направление столбца.
Поперечная ось
Поперечная ось расширяется по оси X или в направлении строк. Мы можем изменить значение, используя свойство flexDirection .
Добавить еще один элемент внутри контейнера.
Мы добавим один дочерний элемент внутри контейнера представления.
//Класс App.jsexport по умолчанию App расширяет Component {render () {return ( Добро пожаловать в React Native ); }} const styles = StyleSheet.create ({container: {flex: 1, backgroundColor: '# F5FCFF',}, welcome: {flex: 1}});
Теперь перезагрузите iOS экран, если вы не включили горячую перезагрузку. Кстати, вы можете разрешить горячую перезагрузку, набрав горячую клавишу: cmd + D , и вы получите один экран меню, в котором выберите включить горячую перезагрузку . Вы увидите экран, как показано ниже.
Вы можете видеть что текст появляется на экране, но находится в самом верху и не имеет хорошего стиля. Итак, что мы можем сделать, так это присвоить контейнеру marginTop: 20 и посмотреть, что произойдет. Также присвойте стилю приветствия marginTop: 20 .
//Класс по умолчанию App.jsexport App extends Component {render () {return ( Добро пожаловать в React Native ); }} const styles = StyleSheet.create ({container: {flex: 1, marginTop: 20, backgroundColor: '# F5FCFF',}, добро пожаловать: {flex: 1, margin: 20}});
Вы увидите такой экран.
Теперь все выглядит хорошо. Хорошо, теперь повторите текст приветствия еще два раза, вот так.
//Класс App.jsexport по умолчанию App расширяет Component {render () {return ( Добро пожаловать в React Native Добро пожаловать в React Native Добро пожаловать в React Native Текст> ); }}
Мы уже назначили оба контейнера стилей и добро пожаловать в flex 1 .
//App.jsconst styles = StyleSheet.create ({container: {flex: 1, marginTop: 20, backgroundColor: '# F5FCFF',}, добро пожаловать: {flex: 1, margin: 20}});
Теперь, мы можем анализировать экран.
Смотрите, теперь все трое детей имеют одинаковую высоту и ширину. Мы можем убедиться в этом, назначив цвет фона и установив свойство поля.
//App.jsconst styles = StyleSheet.create ({container: {flex: 1, marginTop: 20, backgroundColor: '# F5FCFF ',}, добро пожаловать: {flex: 1, margin: 20, backgroundColor:' orange ', margin: 10}});
Хорошо, теперь снова посмотрим на экран.
Теперь по умолчанию flexDirection располагается вдоль главной оси. Измените flexDirection на row и посмотрите, что произойдет.
//App.jsconst styles = StyleSheet.create ({container: {flex: 1, marginTop: 20, flexDirection: 'row', backgroundColor: '# F5FCFF',}, добро пожаловать: {flex: 1, margin: 20, backgroundColor: 'orange', margin: 10}});
Таким образом, дочерний элемент выровнен в одну строку, а оставшаяся область покрыта гибким слоем 1. Итак, это вот как можно использовать свойство flexDirection . Теперь снова удалите свойство flexDirection. Он имеет два свойства, как определено ниже. Вы можете использовать по своему усмотрению.
flexDirection: 'column' || 'row'
Выровнять содержимое
Добавление justifyContent к стилю компонента определяет распределение детей по первичной оси . Какие дочерние элементы следует распределить в начале, в центре, в конце или равномерно? Доступные варианты: flex-start , center , flex-end , space-around , между пробелами и равномерно . Он будет работать в поперечном направлении или по оси X.
Выровнять элементы
Он будет работать по оси Y или главному направлению . Он выровняет элементы в начале, по центру и в конце гибкого макета. Он имеет следующие свойства: flex-start, center, flex-end, space-around, space-between и space-evenly . Мы можем использовать это в нашем примере.
//App.jsconst styles = StyleSheet.create ({container: {flex: 1, marginTop: 20, backgroundColor: '# F5FCFF', alignItems: ' flex-start ',}, добро пожаловать: {flex: 1, margin: 20, backgroundColor:' orange ', margin: 10,}});
Результат выглядит следующим образом.
Точно так же мы можем назначить другие свойства и увидеть результат изменения.
Text Align
Свойство textAlign выравнивает дочерний текст по левому краю , вправо или по центру. В нашем примере это текст «Добро пожаловать, чтобы реагировать на родной язык». Теперь мы можем назначить textAlign: ‘center’ стилю приветствия .
//App.jsconst styles = StyleSheet.create ({container: {flex: 1, marginTop: 20, backgroundColor: '# F5FCFF',}, добро пожаловать: {flex: 1, margin: 20, backgroundColor: 'orange', margin: 10, textAlign: 'center',}});
Теперь мы можем дать paddingTop к тексту, чтобы он находился в центре, а также назначьте fontSize: 20 , чтобы он выглядел большим.
// App.jsconst styles = StyleSheet.create ({container: {flex: 1, marginTop: 20, backgroundColor: '# F5FCFF',}, добро пожаловать: {flex: 1, margin: 20, backgroundColor: 'orange', margin: 10 , textAlign: 'center', fontSize: 20, paddingTop: 70,}});
Итак, наш окончательный макет выглядит так.
Окончательный код выглядит так.
//App.jsimport React, { Component} из 'react'; импорт {StyleS heet, Text, View} из 'react-native'; класс экспорта по умолчанию App расширяет Component {render () {return ( Добро пожаловать в React Native Добро пожаловать в React Native Добро пожаловать в React Native ); }} const styles = StyleSheet.create ({container: {flex: 1, marginTop: 20, backgroundColor: '# F5FCFF',}, добро пожаловать: {flex: 1, margin: 20, backgroundColor: 'orange', margin: 10 , textAlign: 'center', fontSize: 20, paddingTop: 70,}});
Есть другие свойства, о которых вы можете узнать в React Native Documentation.
Наконец, Учебное пособие по React Native Flexbox подошло к концу. Спасибо, что приняли.
