React Native · pelajaran 5
Dari web ke React Native
React yang sama, bahan yang lain
React Native menjalankan komponen React di HP, tapi tampilannya tersusun dari komponen native, bukan HTML:
| web | React Native |
|---|---|
<div> | <View> |
<p>, <span>, <h1> | <Text> |
<button onClick> | <Pressable onPress> |
<input onChange> | <TextInput onChangeText> |
<img src> | <Image source> |
CSS + className | objek style (StyleSheet.create) |
useState, props, dan map tetap sama persis. Yang berubah hanya “bahan bangunan” di ujung pohon.
Playground ini meniru aturan HP sungguhan. Coba:
- tulis
<div>di dalam App, atau - tulis teks langsung di dalam
<View>tanpa<Text>.
Keduanya error, seperti di HP asli.
Gaya tanpa CSS
const styles = StyleSheet.create({
nama: { marginTop: 12, fontSize: 20, fontWeight: '700' },
});- Nama properti memakai camelCase (
marginTop, bukanmargin-top). - Angka tanpa satuan berarti titik (point) layar.
- Tidak ada pewarisan antar elemen: warna teks harus ditulis di
<Text>itu sendiri.
Tombol bisa diberi gaya berbeda saat ditekan: style={({ pressed }) => [styles.tombol, pressed && { opacity: 0.7 }]}.
Coba
Di tab Komponen, centang “tampilkan View/Text”. Pohonnya kini memperlihatkan komponen bawaan (View, Text) di antara komponen buatanmu. Di bawahnya, react-native-web mengubah semuanya menjadi elemen web agar bisa tampil di browser.
Misi
Tambahkan tombol <Pressable> bertuliskan Ikuti. Saat ditekan, tulisannya menjadi Mengikuti dan jumlah pengikut naik 1. Tekan lagi untuk kembali.
Selanjutnya: Layout di iPhone: area aman, flex, dan FlatList · Semua pelajaran