React Native - Flexbox

Для поддержки экранов разных размеров React Native предлагает Flexbox служба поддержки.

Мы будем использовать тот же код, что и в нашем React Native - Stylingглаву. Мы только изменимPresentationalComponent.

Макет

Для достижения желаемого макета flexbox предлагает три основных свойства: flexDirection justifyContent и alignItems.

В следующей таблице показаны возможные варианты.

Свойство	Значения	Описание
flexDirection	'колонка ряд'	Используется, чтобы указать, будут ли элементы выровнены по вертикали или по горизонтали.
justifyContent	'center', 'flex-start', 'flex-end', 'space-around', 'space-between'	Используется для определения того, как элементы должны быть распределены внутри контейнера.
alignItems	'center', 'flex-start', 'flex-end', 'вытянутый'	Используется для определения того, как элементы должны быть распределены внутри контейнера вдоль вторичной оси (противоположной flexDirection)

Если вы хотите выровнять элементы по вертикали и центрировать их, вы можете использовать следующий код.

App.js

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'

const Home = (props) => {
   return (
      <View style = {styles.container}>
         <View style = {styles.redbox} />
         <View style = {styles.bluebox} />
         <View style = {styles.blackbox} />
      </View>
   )
}

export default Home

const styles = StyleSheet.create ({
   container: {
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'grey',
      height: 600
   },
   redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
   },
   bluebox: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
   },
   blackbox: {
      width: 100,
      height: 100,
      backgroundColor: 'black'
   },
})

Output

Если элементы нужно переместить на правую сторону и между ними нужно добавить пробелы, то мы можем использовать следующий код.

App.js

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'

const App = (props) => {
   return (
      <View style = {styles.container}>
         <View style = {styles.redbox} />
         <View style = {styles.bluebox} />
         <View style = {styles.blackbox} />
      </View>
   )
}

export default App

const styles = StyleSheet.create ({
   container: {
      flexDirection: 'column',
      justifyContent: 'space-between',
      alignItems: 'flex-end',
      backgroundColor: 'grey',
      height: 600
   },
   redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
   },
   bluebox: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
   },
   blackbox: {
      width: 100,
      height: 100,
      backgroundColor: 'black'
   },
})