React Native-フレックスボックス

さまざまな画面サイズに対応するために、React Nativeは Flexbox サポートを提供しています。

*React Native-Styling* の章で使用したものと同じコードを使用します。 *PresentationalComponent* のみを変更します。

レイアウト

目的のレイアウトを実現するために、flexboxには3つの主要なプロパティがあります- flexDirection justifyContent および alignItems 。

次の表は、可能なオプションを示しています。

Property	Values	Description
flexDirection	'column', 'row'	Used to specify if elements will be aligned vertically or horizontally.
justifyContent	'center', 'flex-start', 'flex-end', 'space-around', 'space-between'	Used to determine how should elements be distributed inside the container.
alignItems	'center', 'flex-start', 'flex-end', 'stretched'	Used to determine how should elements be distributed inside the container along the secondary axis (opposite of 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'
   },
})

出力

React Native Flexbox Center

アイテムを右側に移動し、それらの間にスペースを追加する必要がある場合は、次のコードを使用できます。

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

React Native Flexbox Right

React-native-flexbox

React Native-フレックスボックス

レイアウト