Memulai dengan Layout React Native

Indonesian (Bahasa Indonesia) translation by AaliyaA (you can also view the original English article)

Dalam tutorial ini, Anda akan belajar cara menata aplikasi React Native dan bagaimana menerapkan tata letak yang biasa digunakan dalam aplikasi. Ini termasuk Stack Layout, Grid Layout, dan Absolut Layout. Saya akan mengasumsikan bahwa Anda sudah mengetahui dasar-dasar styling aplikasi React Native dan bagaimana menggunakan CSS secara umum, jadi saya tidak akan terlalu banyak memikirkan StyleSheet.create dan bagaimana menambahkan styling ke berbagai elemen.

Anda dapat menemukan sumber lengkap kode untuk tutorial ini pada GitHub.

Pengaturan Proyek

Untuk mempermudah, kita akan menggunakan React Native for Web. Dengan React Native untuk Web Starter, kita dapat dengan mudah memutarkan proyek React Native baru yang dapat dijalankan di browser. Kode ini 100% kompatibel dengan proyek React Native. Kita akan membuat sebuah komponen yang terpisah untuk setiap layout yang kita akan menerapkan sehingga Anda dapat dengan mudah mengimpornya ke sebuah proyek React Native yang normal jika Anda ingin. Kita hanya menggunakan React Native untuk Web karena lebih mudah untuk mendapatkannya dan menjalankannya.

Anda dapat menjalankan perintah berikut untuk mendirikan proyek:

git clone https://github.com/grabcode/react-native-web-starter.git RNLayouts
cd RNLayouts
rm -rf .git
npm install

Setelah itu dilakukan instalasi, menavigasi di dalam direktori app/componenents. Di sinilah file-file itu yang terutama akan kita kerjakan.

Buka App.js file dan mengganti kode standar dengan berikut:

import React, { Component } from 'react';

//import the components that we'll be creating here

export class App extends Component {
  render() {
    return (
        //use the components here
    );
  }
}

Kemudian, Anda dapat mengimpor komponen yang akan kita buat dan kemudian membuat mereka dari file ini. Ingatlah bahwa setiap komponen yang kita simpan di dalam direktori layouts tidak boleh diberikan dengan yang lain. Sebagai contoh, jika kita memiliki layouts/StackLayout.js, melakukan hal berikut di App.js:

import React, { Component } from 'react';

//import the components that we'll be creating here
import StackLayout from './layouts/StackLayout';

export class App extends Component {
  render() {
    return (
        <StackLayout />
    );
  }
}

Anda dapat melayani proyek dengan menjalankan perintah berikut:

npm run dev

Hal ini memungkinkan Anda untuk mengakses dengan browser dengan mengunjungi http://localhost:3000. Reload halaman penuh akan dipicu jika Anda membuat perubahan ke salah satu file yang saat ini diimpor dari file App.js.

Cara Membuat Tata Letak yang Berbeda

Tata-letak dalam React Native menggunakan subset Flexbox. (Saya katakan "subset" karena tidak semua fitur yang ada dalam spesifikasi Flexbox disertakan.) Jadi, jika Anda sudah tahu Flexbox, maka Anda dapat langsung menerapkan keterampilan tersebut di React Native. Juga perlu dicatat bahwa tidak ada unit pelampung atau persentase berbasis di React Native. Ini berarti bahwa kita hanya dapat melakukan tata letak menggunakan Flexbox dan penempatan CSS.

Stack Layout

Jenis layout pertama yang akan kita terapkan adalah Stack Layout. Untuk orientasi vertikal, ia menumpuk elemen di atas satu sama lain, sementara untuk orientasi horizontal, elemen ditempatkan berdampingan. Mari kita lihat pada orientasi vertikal pertama:

Berikut adalah kode untuk mencapai tata letak di atas:

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Dimensions
} from 'react-native';

var { height } = Dimensions.get('window');

var box_count = 3;
var box_height = height / box_count;

export default class VerticalStackLayout extends Component {
  render() {
    return (
        <View style={styles.container}>
            <View style={[styles.box, styles.box1]}></View>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box, styles.box3]}></View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  box: {
    height: box_height
  },
  box1: {
    backgroundColor: '#2196F3'
  },
  box2: {
    backgroundColor: '#8BC34A'
  },
  box3: {
    backgroundColor: '#e3aa1a'
  }
});

Memecah kode di atas, kita pertama kali mendapatkan ketinggian ruang yang tersedia untuk app untuk mengkonsumsi. Kemudian kita menghitung apa yang akan menjadi puncak setiap kotak. Karena kita memiliki tiga kotak, kita membaginya jadi tiga.

var { height } = Dimensions.get('window');

var box_count = 3;
var box_height = height / box_count;

Markup, kotak harus dibungkus dalam sebuah container. Gaya umum dinyatakan dalam objek box, dan warna latar belakang unik diterapkan untuk object bernama unik (box1, box2, box3):

<View style={styles.container}>
    <View style={[styles.box, styles.box1]}></View>
    <View style={[styles.box, styles.box2]}></View>
    <View style={[styles.box, styles.box3]}></View>
</View>

Untuk menggunakan Flexbox, Anda harus menggunakan flex properti pada container. Value adalah jumlah ruang yang akan digunakan. Jika 1, berarti itu akan mengkonsumsi semua ruang yang tersedia, asalkan elemen tersebut tidak memiliki sibling. Kita akan melihat contoh penggunaan flex dengan sibling nantinya.

flexDirection memungkinkan Anda untuk menentukan sumbu utama layout. Secara default, ini diatur ke column. Pengaturan flexDirection ke column berarti bahwa children dari container akan diletakkan secara vertikal (ditumpuk di atas satu sama lain) saat mengaturnya ke row berarti bahwa children akan ditata secara horizontal (berdampingan). Untuk mencapai ketinggian yang sama, mengatur ketinggian box dengan nilai yang telah kita hitung sebelumnya.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  box: {
    height: box_height //set this one
  },
  box1: {
    backgroundColor: '#2196F3'
  },
  box2: {
    backgroundColor: '#8BC34A'
  },
  box3: {
    backgroundColor: '#e3aa1a'
  }
});

Berikut ini gambar untuk membantu Anda memvisualisasikan bagaimana konten akan mengalir berdasarkan pada flexDirection yang Anda tentukan.

Illustration of flexDirection row and column

Method yang baru saya tunjukkan kepada Anda adalah cara manual dalam melakukan sesuatu. Menggunakan Dimensions untuk menghitung lebar atau tinggi elemen akan gagal jika aplikasi Anda mendukung orientasi perangkat potret dan lanskap. Itu karena begitu pengguna membalik perangkat mereka, lebar atau tinggi yang Anda hitung sebelumnya akan salah. React Native tidak akan secara otomatis menghitung ulang untuk Anda, sehingga aplikasi akhirnya tampak aneh.

Flexbox benar-benar dapat melakukan komputasi untuk Anda jika Anda hanya memberikan nilai yang benar. Untuk mencapai layout yang sama seperti di atas tanpa menggunakan Dimensions, yang harus Anda lakukan adalah menentukan flex: 1 untuk semua box daripada menentukan height:

box: {
    flex: 1
},

Sekarang ini adalah contoh menggunakan flex dengan sibling. Sekarang kita memiliki tiga sibling dengan nilai flex yang sama. Ini berarti bahwa mereka bertiga sama-sama akan berbagi ruang yang tersedia karena nilai flex nya sama. (Anda dapat benar-benar menggunakan nilai flex apapun asalkan semua elemen children memiliki nilai yang sama.)

Dengan menggunakan pengetahuan ini, Anda sekarang dapat mencapai layout dengan header, content, dan footer:

//header
box1: {
    flex: 1,
    backgroundColor: '#2196F3'
},
//content
box2: {
    flex: 10,
    backgroundColor: '#8BC34A'
},
//footer
box3: {
    flex: .5,
    backgroundColor: '#e3aa1a'
}

Akan terlihat seperti ini:

Catat bahwa ini akan menjadi statis. Jadi jika konten utama Anda menjadi lebih tinggi dari tinggi tersedia maksimal, maka sisa konten Anda akan disembunyikan. Jika Anda mengharapkan konten Anda melampaui batas itu, Anda dapat menggunakan komponen ScrollView internal untuk secara otomatis menghasilkan scrollbar vertikal seperti di halaman web.

Tata Letak Stack Horizontal

Untuk mengimplementasikan layout tumpukan horizontal, yang harus Anda lakukan hanyalah mengubah flexDirection ke row.

  container: {
    flex: 1,
    flexDirection: 'row'
  },

Jika kita mengubah nilai box flex kembali ke 1, ini menghasilkan output berikut:

Satu-satunya hal yang kita ubah adalah flexDirection, yang sekarang diatur ke row. Karena box sudah siap untuk flex: 1, mereka akan memiliki lebar dan tinggi yang sama. Semua ide dari vertikal stack layout sama-sama berlaku untuk yang satu ini.

Justify Content

Jika Anda ingin mengontrol distribusi children dalam container, Anda menggunakan properti justifyContent di container.

Di bawah ini adalah lima value yang mungkin dapat digunakan dengan properti ini. Dalam contoh berikut, height masing-masing children berkurang untuk menunjukkan bagaimana masing-masing akan terlihat. Anda tidak akan dapat melihat perbedaan jika value flex adalah 1 untuk setiap children, karena mereka akan menghabiskan semua ruang yang tersedia.

flex-start: elemen children diselaraskan menuju titik awal. Perhatikan latar belakang putih tepat di bawah child terakhir. Itu adalah bagaimana Anda tahu bahwa ini menggunakan flex-start karena semua children sejajar menuju titik awal. Ini meninggalkan ruang kosong menuju akhir.

flex-end: elemen children disejajarkan menuju garis akhir. Perhatikan bahwa saat ini ruang kosong berada di titik awal.

center: elemen children ditempatkan ke tengah. Kali ini ruang kosong dibagi sama antara titik awal dan titik akhir.

space-around: elemen children didistribusikan sedemikian rupa sehingga akan ada ruang yang sama di sekitar masing-masing. Ini berarti bahwa element di bagian luar akan memiliki lebih sedikit ruang di sisi luarnya dan jarak antara kedua children itu berlipat ganda.

space-between: elemen children didistribusikan sedemikian rupa sehingga akan ada jumlah ruang yang sama antara masing-masing.

Seperti yang Anda ketahui, masing-masing properti gaya ini bergantung pada tinggi atau lebar elemen children. Ini tergantung pada lebar jika flexDirection adalah row, dan pada ketinggian jika flexDirection adalah column.

Misalnya, space-between tidak akan benar-benar memiliki efek pada vertikal stack layout jika masing-masing elemen children menggunakan flex untuk mengontrol tinggi. Ini karena tidak akan ada lagi ruang tersisa untuk kesenjangan antara setiap elemen children untuk dikonsumsi.

Align Items

Pada pandangan pertama, justifyContent dan alignItems mungkin terlihat seolah-olah mereka melakukan hal yang sama. Mereka juga berbagi tiga nilai yang mungkin: flex-start, flex-end, dan center, dengan penambahan value strech.

Perbedaan utama antara justifyContent dan alignItems adalah poros distribusi children. Seperti yang Anda lihat sebelumnya, justifyContent selalu menggunakan sumbu utama saat mendistribusikan elemen child. Tapi alignItems menggunakan sumbu yang berlawanan dengan yang utama.

Kita sudah tahu bahwa sumbu ditentukan oleh flexDirection yang telah ditetapkan. Jadi jika flexDirection adalah row, sumbu utama mengalir dari kiri ke kanan. Ini berarti bahwa sumbu silang akan mengalir dari atas ke bawah. Di sisi lain, jika flexDirection adalah column maka sumbu silang akan mengalir dari kiri ke kanan.

Di bawah ini adalah beberapa contoh justifyContent dan alignItems yang diimplementasikan berdampingan dengan flexDirection dari row. Yang pertama menggunakan justifyContent sedangkan yang kedua menggunakan alignItems.

flex-start: positioning dari elemen adalah sama, itulah sebabnya implementasi alignItems terlihat persis seperti justifyContent.

justifyContent and alignItems flex-start

flex-end: sekarang kita mulai melihat perbedaan. Dalam contoh pertama, itu di akhir baris row pertama, sedangkan contoh kedua muncul di garis awal baris terakhir.

center: center memiliki ide yang sama dengan nilai-nilai yang kita tawarkan untuk ini. Dalam contoh pertama, item terpusat pada sumbu x sementara yang kedua, item yang berpusat di sumbu y.

justifyContent and alignItems center

strech: menggunakan ini untuk memiliki elemen children peregangan untuk mengisi container. Ini adalah nilai default untuk alignItems, jadi menentukan value ini adalah opsional. Anda telah melihat bagaimana ini bekerja ketika kita menerapkan vertikal dan horizontal stack layout.

Berikut adalah kode yang digunakan dalam contoh di atas. Hanya bermain dengan value untuk flexDirection, justifyContent dan alignItems jika Anda ingin melihat tampilannya:

import React, { Component } from 'react';
import {
  StyleSheet,
  View
} from 'react-native';

export default class AlignItems extends Component {
  render() {
    return (
      <View style={styles.wrapper}>
        <View style={styles.container}>
            <View style={[styles.box, styles.box1]}></View>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box, styles.box3]}></View>
        </View>
        <View style={styles.container2}>
            <View style={[styles.box, styles.box1]}></View>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box, styles.box3]}></View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1
  },
  container: {
    flex: .5,
    flexDirection: 'row',
    justifyContent: 'flex-start', //replace with flex-end or center
    borderBottomWidth: 1,
    borderBottomColor: '#000'
  },
  container2: {
    flex: .5,
    flexDirection: 'row',
    alignItems: 'flex-start' //replace with flex-end or center
  },
  box: {
    width: 100,
    height: 100
  },
  box1: {
    backgroundColor: '#2196F3'
  },
  box2: {
    backgroundColor: '#8BC34A'
  },
  box3: {
    backgroundColor: '#e3aa1a'
  }
});

Jika Anda ingin menentukan keselarasan masing-masing elemen dalam container, Anda dapat menggunakan properti alignSelf. Semua value yang mungkin untuk align-items juga berlaku untuk properti ini. Jadi, misalnya, Anda dapat mensejajarkan satu elemen ke kanan containernya, sementara sisanya disejajarkan ke kiri.

Grid Layout

React Native tidak datang dengan sistem grid layout, tetapi Flexbox cukup fleksibel untuk membuatnya. Dengan menggunakan hal-hal yang telah kita pelajari sejauh ini, kita dapat membuat ulang Grid layout menggunakan Flexbox. Inilah contohnya:

Dan inilah kode yang membuat layout itu:

import React, { Component } from 'react';
import {
  StyleSheet,
  View
} from 'react-native';

export default class GridLayout extends Component {
  render() {
    return (
      <View style={styles.container}>
          <View style={styles.row}>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box, styles.box3]}></View>
            <View style={[styles.box, styles.two]}></View>
          </View>
          
          <View style={styles.row}>
            <View style={[styles.box, styles.two]}></View>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box, styles.box3]}></View>
          </View>

          <View style={styles.row}>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box, styles.two]}></View>
            <View style={[styles.box, styles.box3]}></View>
          </View>

          <View style={styles.row}>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box, styles.box3]}></View>
          </View>

          <View style={styles.row}>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box]}></View>
          </View>

          <View style={styles.row}>
            <View style={[styles.box]}></View>
          </View>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  row: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10
  },
  box: {
    flex: 1,
    height: 100,
    backgroundColor: '#333',
  },
  box2: {
    backgroundColor: 'green'
  },
  box3: {
    backgroundColor: 'orange'
  },
  two: {
    flex: 2
  }
});

Dari kode di atas, Anda dapat melihat bahwa kita meniru apa yang biasanya mereka lakukan dalam framework grid CSS. Setiap baris dibungkus di tempat terpisah, dan item grid yang di dalamnya. Value default flex adalah 1 diterapkan untuk setiap item sehingga keduanya akan membagi ruang yang tersedia pada setiap row. Tetapi untuk item yang perlu mengkonsumsi ruang lebih besar, nilai flex yang lebih tinggi diterapkan. Ini secara otomatis menyesuaikan lebar item lain sehingga bisa menampung semua item.

Jika Anda ingin menambahkan spasi di antara setiap item dalam satu row, Anda dapat menambahkan padding ke masing-masing dan kemudian membuat box di dalam masing-masing.

Ini menghasilkan output berikut:

Absolute Layout

React Native hanya mendukung posisi absolute dan relative. Ini seharusnya tidak membatasi Anda, karena Anda selalu dapat menggabungkan ini dengan Flexbox untuk memposisikan elemen yang berbeda di mana pun Anda inginkan.

Mari kita lihat bagaimana kita akan mencapai hal-hal berikut:

Kita dapat mencapai ini dengan mudah jika kita memiliki perintah penuh atas value pemosisian yang tersedia di browser. Namun karena kita dalam React Native, kita perlu memikirkan cara Flexbox ini terlebih dahulu dan kemudian menggunakan penempatan CSS untuk box yang kecil.

Menggunakan Flexbox, ini dapat dicapai dengan dua cara. Anda dapat menggunakan row atau column untuk flexDirection untuk container utama. Bagaimana Anda mengatur elemen-elemen yang berbeda akan tergantung pada method mana yang Anda pilih. Di sini kita akan menggunakan row untuk flexDirection sehingga layar akan dibagi menjadi tiga kolom. Kolom pertama akan berisi box oranye, kolom kedua akan berisi box hitam, abu-abu dan hijau, dan yang ketiga akan berisi box ungu biru dan kecil.

import React, { Component } from 'react';
import {
  StyleSheet,
  View
} from 'react-native';

export default class Positioning extends Component {
  render() {
      return (
      <View style={styles.container}>

        <View style={styles.left}>
          <View style={[styles.box, styles.big_orange_box]}>
          </View>
        </View>
          
        <View style={styles.middle}>
          <View style={[styles.box, styles.big_black_box]}>
            <View style={[styles.inner_box, styles.red_box]}></View>
          </View>        
          <View style={[styles.big_gray_box]}></View>
          <View style={[styles.box, styles.big_green_box]}>
            <View style={[styles.inner_box, styles.orange_box]}></View>
          </View>
        </View>
  
        <View style={styles.right}>
          <View style={[styles.box, styles.big_lightblue_box]}>
            <View style={[styles.inner_box, styles.black_box]}></View>
          </View>
          <View style={[styles.inner_box, styles.purple_box]}></View>
        </View>
        
      </View>
    );
  }
}

Jika Anda sudah tahu bagaimana masing-masing elemen akan ditata, itu hanya masalah penerapan hal-hal yang telah kita pelajari sejauh ini. Setelah semua, kita tidak benar-benar perlu untuk menerapkan CSS posisi pada box besar, hanya yang kecil.

Kolom pertama hanya memiliki box orange, sehingga menerapkan justifyContent: 'center' untuk container harus melakukan trik. Jika Anda sudah lupa, default flexDirection ke column. Ini berarti bahwa jika Anda menetapkan justifyContent ke center, children akan sejajar di tengah sumbu y.

Kolom kedua pada dasarnya memiliki gagasan yang sama dengan yang pertama, hanya saja kali ini kita tidak ingin menyelaraskan semua box ke center. Yang kita inginkan adalah agar mereka memiliki ruang yang sama di antara satu sama lain, dan justifyContent: 'space-between' mendapatkan kerjaannya selesai. Tetapi pada saat yang sama kita juga ingin memusatkan semua anak pada sumbu X sehingga kita menggunakan alignItems: 'center'.

Satu-satunya bagian yang sulit di sini adalah bahwa Anda tidak boleh menerapkan properti width apa pun ke box abu-abu karena kita ingin meregangkan semua cara untuk mengkonsumsi lebar penuh parentnya. Karena kita tidak menerapkan width apa pun, kita harus menerapkan alignSelf: 'stretch' ke box abu-abu sehingga akan mengkonsumsi width penuh parentnya.

Selanjutnya, untuk memposisikan box merah kecil sedikit menjauh dari posisi relatifnya, kita menggunakan position: relative dan kemudian menerapkan value top dan left karena posisinya relatif berada di sudut kiri atas parentnya.

Sedangkan untuk box oranye kecil, kita menggunakan position: 'absolute' karena kita perlu menyelaraskannya ke sudut kanan atas parentnya. Ini berfungsi karena elemen yang benar-benar diposisikan di React Native terikat pada parentnya.

Kolom ketiga pada dasarnya berlaku ide yang sama, jadi saya tidak akan menjelaskannya.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row'
  },
  left: {
    flex: 1,
    justifyContent: 'center'
  },
  middle: {
    flex: 5,
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  right: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end'
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#333'
  },
  big_green_box: {
    backgroundColor: 'green'
  },
  big_orange_box: {
    backgroundColor: 'orange'
  },
  big_lightblue_box: {
    backgroundColor: '#03A9F4'
  },
  big_gray_box: {
    height: 100,
    alignSelf: 'stretch',
    backgroundColor: '#ccc'
  },  
  inner_box: {
    width: 20,
    height: 20,
  },
  red_box: {
    position: 'relative',
    backgroundColor: 'red',
    top: 10,
    left: 10
  },
  orange_box: {
    position: 'absolute',
    backgroundColor: 'orange',
    top: 10,
    right: 10
  },
  purple_box: {
    position: 'absolute',
    backgroundColor: 'purple',
    bottom: 10,
    right: 10
  },
  black_box: {
    position: 'relative',
    backgroundColor: 'black'
  }
});

Selanjutnya, mari kita coba untuk menerapkan layout header dan footer yang tetap. Ini biasanya ditemukan di aplikasi yang memiliki navigasi tab; tab ditetapkan di bagian bawah layar sementara konten utama dapat digulir.

Bagi kita untuk mencapai hal ini, kita perlu menggunakan komponen ScrollView sehingga jika konten utama melebihi tinggi container, React Native akan secara otomatis menghasilkan scrollbar vertikal. Ini memungkinkan kita untuk menambahkan marginTop dan marginBottom ke container konten utama sehingga header dan footer tetap tidak akan menghalangi konten utama. Juga, perhatikan bahwa value left dan right dari header dan footer diatur ke 0 sehingga mereka akan mengkonsumsi lebar perangkat penuh.

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ScrollView
} from 'react-native';

export default class FixedHeaderFooter extends Component {
  render() {
      return (
      <View style={styles.container}>
        <View style={[styles.header]}></View>
        <ScrollView>
          <View style={[styles.content]}>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
          </View>
        </ScrollView>
        <View style={[styles.footer]}></View>
      </View>
  	);
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center'
  },
  header: {
    height: 40,
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    backgroundColor: '#03A9F4',
    zIndex: 10
  },
  content: {
    alignItems: 'center',
    marginTop: 50,
    marginBottom: 40
  },
  footer: {
    height: 40,
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: '#8BC34A'
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#333',
    marginBottom: 10
  }
});

Begini tampilannya:

Library Pihak Ketiga

React Native memiliki komunitas besar di belakangnya, jadi tidak mengherankan jika beberapa library telah dibuat untuk memudahkan penerapan layout. Dalam bagian ini, saya akan memperkenalkan Anda sebuah library yang disebut React Native Easy Grid. Anda dapat menggunakannya untuk mendeskripsikan bagaimana Anda ingin menata aplikasi Anda dengan memanfaatkan komponen Grid, Row, dan Col.

Anda dapat menginstalnya dengan perintah berikut:

npm install react-native-easy-grid --save

Impor library dan ekstrak berbagai komponen di file Anda.

import React, { Component } from 'react';
import {
  StyleSheet,
  View
} from 'react-native';

import { Col, Row, Grid } from "react-native-easy-grid";

Komponen Grid yang digunakan untuk membungkus segala sesuatu. Col digunakan untuk membuat kolom, dan Row digunakan untuk membuat baris. Anda dapat menentukan size properti untuk Row dan Col, meskipun kita hanya menggunakannya pada Row di bawah ini. Jika ukuran tidak ditentukan, itu akan membagi ruang yang tersedia antara instance Col.

Dalam hal ini, hanya ada dua, sehingga seluruh layar dibagi menjadi dua kolom. Kolom pertama kemudian dibagi menjadi dua baris. Di sini kita menentukan size, tetapi Anda benar-benar dapat melewatkannya jika Anda hanya perlu baris berukuran sama, seperti yang kita lakukan di bawah ini.

export default class FlexboxGridLibrary extends Component {
  
  render() {
    return (
        <Grid>
            <Col>
                <Row size={50} style={styles.orange_box}></Row>
                <Row size={50} style={styles.green_box}></Row>
            </Col>
            <Col style={styles.gray_box}></Col>
        </Grid>
    );
  }
  
}

Setelah selesai, yang harus Anda lakukan adalah menambahkan gaya untuk baris dan kolom:

const styles = StyleSheet.create({
  orange_box: {
    backgroundColor: 'orange'
  },
  green_box: {
    backgroundColor: 'green'
  },
  gray_box: {
    backgroundColor: 'gray'
  }
});

Seperti yang Anda ketahui, React Native Easy Grid memiliki API yang sangat intuitif.

Kesimpulan

Dalam tutorial ini, Anda belajar cara menata aplikasi React Native. Secara khusus, Anda belajar bagaimana menggunakan React Native's Flexbox untuk memposisikan berbagai hal. Anda juga belajar bagaimana menggunakan React Native Easy Grid, yang membuat implementasi Flexbox lebih mudah.

Dalam tutorial yang akan datang, kita akan menerapkan semua yang Anda pelajari dengan menciptakan elemen UI yang biasanya ditemukan di aplikasi: hal-hal seperti kalender, daftar, dan navigasi tab.