React Native Tutorial - FlexBox | AMTech

Hallo Penggemar Koding Indonesia. Berjumpa kembali ditutorial membuat aplikasi android menggunakan React Native. Pada tutorial kali ini kita akan membahas tenatang React Native Tutorial - FlexBox ?. Ok, langsung saja kita mulai.

Untuk mengakomodasi ukuran layar yang berbeda, React Native menawarkan dukungan Flexbox.

Kami akan menggunakan kode yang sama yang kami gunakan dalam bab React Native - Styling kami. Kami hanya akan mengubah PresentationalComponent.
Layout

Untuk mencapai tata letak yang diinginkan, flexbox menawarkan tiga properti utama - flexDirection justifyContent dan alignItems.

Tabel berikut menunjukkan opsi yang memungkinkan.

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)
Jika Anda ingin menyelaraskan item secara vertikal dan memusatkan mereka, maka Anda dapat menggunakan kode berikut.
src/components/home/Home.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' }, }) Jika item perlu dipindahkan ke sisi kanan dan spasi perlu ditambahkan di antara mereka, maka kita dapat menggunakan kode berikut. src/components/home/Home.js import React, { Component } from 'react' import { Text, 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: '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' }, }) Contoh berikut menunjukkan bagaimana Anda dapat menata kotak hitam dan kuning menggunakan flexbox. Setiap kontainer menggunakan properti yang berbeda.  src/components/home/Home.js import React, { Component } from 'react' import { View, Image, StyleSheet } from 'react-native' const Home = () ⇒ { return ( <view> <view style = {style.container1}> <view style = {style.blackImg}/> <view style = {style.yellowImg}/> </View> <view style = {style.container2}> <view style = {style.blackImg}/> <view style = {style.yellowImg}/> </View> <view style = {style.container3}> <view style = {style.blackImg}/> <view style = {style.yellowImg}/> </View> <view style = {style.container4}> <view style = {style.blackImg}/> <view style = {style.yellowImg}/> </View> <view style = {style.container5}> <view style = {style.blackImg}/> <view style = {style.yellowImg}/> </View> ) } export default Home const style = StyleSheet.create ({ container1: { borderBottomWidth: 1, borderBottomColor: '#f4c842' }, container2: { flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#f4c842' }, container3: { flexDirection: 'row', justifyContent: 'flex-end', borderBottomWidth: 1, borderBottomColor: '#f4c842' }, container4: { alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#f4c842' }, container5: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, blackImg: { backgroundColor: 'black', height: 90, width: 90 }, yellowImg: { backgroundColor: 'yellow', height: 50, width: 50 } }) Bagamaimana React Native Tutorial - FlexBox ini?apakah membantu tau tidak? Silahkan Coret-coret dibawah sumber: https://www.tutorialspoint.com/react_native/react_native_flexbox.htm