React-native-flexbox
提供:Dev Guides
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'
},
})
出力
アイテムを右側に移動し、それらの間にスペースを追加する必要がある場合は、次のコードを使用できます。
*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'
},
})