React Native - Flexbox

Per adattarsi a schermi di dimensioni diverse, React Native offre Flexbox supporto.

Useremo lo stesso codice che abbiamo usato nel nostro React Native - Stylingcapitolo. Modificheremo solo il filePresentationalComponent.

disposizione

Per ottenere il layout desiderato, flexbox offre tre proprietà principali: flexDirection justifyContent e alignItems.

La tabella seguente mostra le possibili opzioni.

Proprietà	Valori	Descrizione
flexDirection	'colonna riga'	Utilizzato per specificare se gli elementi saranno allineati verticalmente o orizzontalmente.
justifyContent	'center', 'flex-start', 'flex-end', 'space-around', 'space-between'	Utilizzato per determinare come devono essere distribuiti gli elementi all'interno del contenitore.
alignItems	'center', 'flex-start', 'flex-end', 'stretched'	Utilizzato per determinare come devono essere distribuiti gli elementi all'interno del contenitore lungo l'asse secondario (opposto a flexDirection)

Se desideri allineare gli elementi verticalmente e centralizzarli, puoi utilizzare il codice seguente.

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

Se gli elementi devono essere spostati a destra e gli spazi devono essere aggiunti tra di loro, allora possiamo usare il seguente codice.

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'
   },
})