DEV Community

sandatya widhi
sandatya widhi

Posted on • Edited on

05. Mengenal Fungsi Dasar Interaksi dan Struktur Antarmuka di React Native

#reactnative #beginners #tutorial #ui

Pengenalan Fungsi Dasar Interaksi & Struktur Antarmuka di React Native

Pada materi kali ini, kita akan belajar cara membuat antarmuka dan interaksi dasar di React Native, meliputi:

  1. Fungsi dasar interaksi React Native (TextInput, ScrollView, ListView)
  2. Struktur pembangun antarmuka React Native
  3. Membuat layout antarmuka sederhana

1. Fungsi Dasar Interaksi React Native

React Native menyediakan berbagai komponen bawaan untuk berinteraksi dengan pengguna.

Tiga komponen dasar yang paling sering digunakan adalah:

a. TextInput

Digunakan untuk menerima input teks dari pengguna, seperti form login, komentar, atau pencarian.

Contoh:

import React, { useState } from "react"; import { View, Text, TextInput } from "react-native"; export default function TextInputExample() { const [nama, setNama] = useState(""); return ( <View style={{ padding: 20 }}> <Text>Masukkan Nama Anda:</Text> <TextInput style={{ borderWidth: 1, borderColor: "#ccc", borderRadius: 5, padding: 10, marginTop: 10, }} placeholder="Ketik di sini..." onChangeText={(text) => setNama(text)} /> <Text style={{ marginTop: 10 }}>Halo, {nama}!</Text> </View> ); }
Enter fullscreen mode Exit fullscreen mode

Penjelasan:

  • TextInput menerima teks dari pengguna.
  • onChangeText digunakan untuk menangkap nilai input.
  • useState menyimpan teks yang dimasukkan.

b. ScrollView

Digunakan untuk menggulung (scroll) tampilan secara vertikal atau horizontal.
Sangat berguna jika konten di layar cukup panjang.

Contoh:

import React from "react"; import { ScrollView, Text } from "react-native"; export default function ScrollViewExample() { return ( <ScrollView style={{ padding: 20 }}> {[...Array(20)].map((_, i) => ( <Text key={i} style={{ marginVertical: 10 }}> Ini item ke-{i + 1} </Text> ))} </ScrollView> ); }
Enter fullscreen mode Exit fullscreen mode

Penjelasan:

  • ScrollView menampung elemen yang panjang.
  • Gunakan map() untuk menampilkan banyak teks dalam satu tampilan.

c. ListView (FlatList)

FlatList digunakan untuk menampilkan daftar data (list) secara efisien.
Ini adalah versi modern dari ListView.

Contoh:

import React from "react"; import { View, Text, FlatList } from "react-native"; const dataMahasiswa = [ { id: "1", nama: "Dita" }, { id: "2", nama: "Andi" }, { id: "3", nama: "Rina" }, ]; export default function FlatListExample() { return ( <FlatList data={dataMahasiswa} keyExtractor={(item) => item.id} renderItem={({ item }) => ( <View style={{ padding: 15, borderBottomWidth: 1, borderBottomColor: "#ddd", }} > <Text>{item.nama}</Text> </View> )} /> ); }
Enter fullscreen mode Exit fullscreen mode

Penjelasan:

  • data berisi array daftar data.
  • renderItem digunakan untuk menampilkan setiap item dalam daftar.
  • keyExtractor memberikan ID unik untuk setiap elemen.

2. Struktur Pembangun Antarmuka di React Native

Aplikasi React Native disusun menggunakan komponen.
Komponen-komponen ini bisa dibayangkan seperti “kepingan Lego” yang disusun menjadi satu tampilan.

Struktur dasarnya terdiri dari:

Komponen Fungsi Contoh
View Wadah utama atau kontainer <View>...</View>
Text Menampilkan teks <Text>Halo Dunia</Text>
Image Menampilkan gambar <Image source={...} />
Button Tombol interaksi <Button title="Klik" />
TextInput Input teks dari pengguna <TextInput />

Contoh struktur dasar:

import React from "react"; import { View, Text, Button } from "react-native"; export default function StrukturDasar() { return ( <View style={{ padding: 20 }}> <Text>Halo, ini struktur antarmuka dasar React Native!</Text> <Button title="Klik Saya" onPress={() => alert("Tombol diklik!")} /> </View> ); }
Enter fullscreen mode Exit fullscreen mode

3. Membuat Layout Antarmuka Sederhana

Untuk mengatur tata letak antarmuka, React Native menggunakan sistem Flexbox — sama seperti di CSS.
Dengan Flexbox, kita bisa mengatur arah, posisi, dan ukuran elemen dengan mudah.

Contoh Layout Sederhana:

import React from "react"; import { View, Text, StyleSheet } from "react-native"; export default function LayoutSederhana() { return ( <View style={styles.container}> <View style={styles.box1}> <Text>Header</Text> </View> <View style={styles.box2}> <Text>Konten Utama</Text> </View> <View style={styles.box3}> <Text>Footer</Text> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, padding: 10, }, box1: { flex: 1, backgroundColor: "#FFD700", justifyContent: "center", alignItems: "center", }, box2: { flex: 3, backgroundColor: "#ADD8E6", justifyContent: "center", alignItems: "center", }, box3: { flex: 1, backgroundColor: "#90EE90", justifyContent: "center", alignItems: "center", }, });
Enter fullscreen mode Exit fullscreen mode

Penjelasan:

  • flex: 1 artinya ruang dibagi proporsional berdasarkan nilai flex.
  • justifyContent dan alignItems digunakan untuk mengatur posisi elemen.
  • StyleSheet.create() digunakan untuk membuat style terpisah agar kode rapi.

Kesimpulan

Konsep Fungsi Komponen
TextInput Menerima input teks dari pengguna TextInput
ScrollView Menampilkan konten panjang yang bisa digulung ScrollView
ListView / FlatList Menampilkan daftar data secara efisien FlatList
View, Text, Image Penyusun utama antarmuka -
Flexbox Mengatur layout dan posisi elemen flex, justifyContent, alignItems

Top comments (0)