React Native – Layout

Flexbox

Flexbox adalah sebuah metode layouting yang dapat mengatur ukuran element “child” secara otomatis beradaptasi dengan element “container” ketika tata letak halaman harus dapat menyesuaikan ukuran dan tampilan pada devices yang berbeda-beda.

flexDirection
const Direction = (props)=>{
 return (
  <View style={styles.container}>
   <Box/>
   <Box/>
   <Box/>
   <View style={{flexDirection:'row'}}>
    <Box/>
    <Box/>
    <Box/>
   </View>
  </View>
 )
}

const styles = StyleSheet.create({
 container: {
  flex:1,
  backgroundColor: '#AED581',
 }
});

Alignment axis
const AlignmentAxis = (props)=>{
 return (
  <View style={styles.container}>
   <Box />
   <View style={{flex:1, alignItems:'flex-end', justifyContent:'flex-end'}}>
    <Box />
    <Box />
   </View>
   <Box />
  </View>
 )
}
const styles = StyleSheet.create({
 container: {
  flex:1,
  backgroundColor: `#69B8CC`,
 },
 text:{
  color: 'white',
  textAlign:'center'
 }
});

Alignment
const Alignment = (props)=>{
 return (
  <View style={styles.container}>
   <Box/>
   <View style={{alignItems:'center'}}>
    <Box/>
    <View style={{flexDirection:'row'}}>
     <Box/>
     <Box/>
     <Box/>
    </View>
    <Box/>
   </View>
   <Box/>
  </View>
 )
}
const styles = StyleSheet.create({
 container: {
  flex:1,
  backgroundColor: `#69B8CC`,
 },
 text:{
  color: 'white',
  textAlign:'center'
 }
});

Flex size
const FlexSize = (props)=>{
 return (
  <View style={styles.container}>
   <View style={{flex:0.1}}>
    <Box style={{flex:0.7}}/>
    <Box style={{backgroundColor: 'yellow'}}/>
    <Box/>
    <Box style={{flex:0.3, backgroundColor: 'yellow'}}/>
   </View>
   <View style={{flex:0.1}}>
    <Box style={{flex:1}}/>
    <Box style={{backgroundColor: 'yellow'}}/>
    <Box/>
    <Box style={{flex:1, backgroundColor: 'yellow'}}/>
   </View>
  </View>
 )
}
const styles = StyleSheet.create({
 container: {
  flex:1,
  flexDirection:'row',
  backgroundColor: colors[1],
 },
});


Untuk implementasi detail flexbox Facebook anda dapat anda pelajari disini.

Add a Comment

Your email address will not be published. Required fields are marked *