React Native - Flexbox
React Native, farklı ekran boyutlarına uyum sağlamak için Flexbox destek.
Kullandığımız kodu kullanacağız. React Native - Stylingbölüm. Biz sadece değiştireceğizPresentationalComponent.
Yerleşim
Arzu edilen düzeni elde etmek için flexbox üç ana özellik sunar - flexDirection justifyContent ve alignItems.
Aşağıdaki tablo olası seçenekleri göstermektedir.
Emlak | Değerler | Açıklama |
---|---|---|
flexDirection | "sütun", "satır" | Öğelerin dikey mi yoksa yatay mı hizalanacağını belirtmek için kullanılır. |
justifyContent | 'center', 'flex-start', 'flex-end', 'space-around', 'space-between' | Elemanların kabın içinde nasıl dağıtılacağını belirlemek için kullanılır. |
alignItems | "merkez", "esnek başlangıç", "esnek uç", "uzatılmış" | Öğelerin, ikinci eksen boyunca (flexDirection'ın tersi) konteyner içinde nasıl dağıtılacağını belirlemek için kullanılır |
Öğeleri dikey olarak hizalamak ve merkezileştirmek istiyorsanız, aşağıdaki kodu kullanabilirsiniz.
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
Maddelerin sağ tarafa taşınması ve aralarına boşluk eklenmesi gerekiyorsa aşağıdaki kodu kullanabiliriz.
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'
},
})