React Native Style

Style Digunakan untuk memperindah tampilan layaknya CSS atau Cascading Style Sheet merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Style pada react-native layaknya CSS pada html dengan keunggulan:

1. ID yang ada pada Stylesheet nantinya bisa digunakan untuk menggunakan kembali Style tanpa harus membangunnya dari awal
2. Stylesheet dikirim hanya sekali melalui jembatan tidak seperti object dengan style normal di dalam render ().
3. Memindahkan kode di luar render() membantu mencapai pemahaman kode yang lebih baik dan menambah makna pada komponen tingkat rendah.

Praktikum: Style

Latihan 1

Buatlah tampilan seperti pada gambar, dengan detil:

1. Latar Belakang <view> berwarna: “#EBEBEB”,
2. Seluruh tulisan <Text> rata tengah baik secara horizontal

Langkah-Langkah dalam mengerjakan soal Latihan 1:
Step 1:
Buka Kembali Snack “LatihanLogin1” pada expo.io
Step 2:
Untuk membuat style Anda perlu import Component Stylesheet pada line 2:

Step 3:

Ketiklah perintah berikut untuk membuat style pada <View> dan <Text> setelah line 14 (export default App):

Step 4:
Pada <View>, sisipkan style yang telah dibuat dengan cara:

Step 5:
Pada <Text>, sisipkan style yang telah dibuat dengan cara:

NB: Untuk style pada <Text> selengkapnya dapat dilihat di: https://reactnative.dev/docs/text

Kode Program Lengkap:

Hasil:

Style Height & Width

Digunakan untuk menentukan tinggi dan lebar sebuah komponen dapat menggunakan Fixed Dimensions dan Flex Dimensions. Fixed Dimensions memungkinkan Anda untuk mengatur tinggi dan lebar sebuah komponen dengan ukuran yang tetap.

Contoh: width: 50, height: 50

Sedangkan Flex Dimensions memungkinkan Anda untuk mengatur tinggi dan lebar sebuah komponen dengan ukuran yang dinamis berdasarkan ruang yang tersedia pada layar. Normalnya Anda dapat menggunakan perintah flex: 1 yang memberitahu sebuah komponen untuk mengisi semua ruang yang tersedia.

Dibagi secara merata diantara komponen lain dengan induk yang sama. Semakin besar fleksibilitas yang diberikan, semakin tinggi rasio ruang yang dibutuhkan komponen dibandingkan dengan komponen lain yang diberi fleksibilitas yang kecil.

Praktikum: Style Height & Width

Latihan 2:
Buatlah function dengan nama LatihanFixedDimensions yang berisi tampilan tiga buah <View> dengan menggunakan Fixed Dimensions dengan detil sebagai berikut:
<View> pertama: width = 50, height = 50, backgroundColor = “powderblue”
<View> kedua: width = 100, height = 100, backgroundColor = “skyblue”
<View> ketiga: width = 150, height = 150, backgroundColor = “steelblue”

Langkah-Langkah dalam menyelesaikan Latihan 2:
Step 1:
Pada expo.io, buat Snack dengan nama “LatihanFixedDimensions”
Step 2:
Ketikkan Program Berikut:

Hasil :

Latihan 3:
Buatlah function dengan nama LatihanFlexDimensions yang berisi tampilan tiga buah <View> dengan menggunakan Flex Dimensions dengan detil sebagai berikut:
<View> pertama: flex=1, backgroundColor = “powderblue”
<View> kedua: flex=2, backgroundColor = “skyblue”
<View> ketiga: flex=3, backgroundColor = “steelblue”

Langkah-Langkah dalam menyelesaikan Latihan 3:
Step 1:
Pada expo.io, buat Snack dengan nama “LatihanFlexDimensions”
Step 2:
Ketikkan Program Berikut:

Hasil :

Sumber Referensi : reactnative.dev