Sesuai dengan judulnya ” Belajar React Native Menggunakan ScrollView ” Tutorial kali ini saya akan membahas bagaimana cara membuat ScrollView pada ReactNative.
ScrollView adalah wadah penggulir generik yang dapat meng-host beberapa komponen dan tampilan.
Item yang dapat digulir tidak perlu homogen, dan kita dapat menggulir keduanya secara vertikal dan horizontal (dengan menyetel properti horizontal ataupun vertikal).
Baca Juga :
Belajar React Native 1 : Pengenalan dan Install
Belajar React Native 2 : Height dan Width
Belajar React Native 3 : Pengenalan Style
Belajar React Native Menggunakan ScrollView
Berikut ini contoh membuat ScrollView vertikal dengan kedua gambar dan teks digabungkan.
Silahkan ubah baris kode index.android.js kalian menjadi seperti berikut :
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, ScrollView, Image, Text } from 'react-native'; export default class HelloBadoy extends Component { render() { return ( <ScrollView> <Text style={{fontSize:96}}>Scroll me plz</Text> <Text style={{fontSize:96}}>If you like</Text> <Text style={{fontSize:96}}>Scrolling down</Text> <Text style={{fontSize:96}}>Whats the best</Text> <Text style={{fontSize:96}}>Framework around?</Text> <Text style={{fontSize:80}}>React Native</Text> </ScrollView> ); } } AppRegistry.registerComponent('HelloBadoy', () => HelloBadoy);
Maka akan tampil teks yang besar dan dapa kita scroll kebawah.
ScrollViews dapat dikonfigurasi untuk memungkinkan paging melalui tampilan menggunakan gerakan swiping dengan menggunakan pagingEnabled props.
Bergerak secara horizontal antara tampilan juga bisa diimplementasikan di Android dengan menggunakan komponen ViewPagerAndroid.
Baca Juga :
Belajar React Native 4 : Layout dengan Flexbox
Belajar React Native 5 : Handling Text Input
Belajar React Native 6 : Handling Touches
ScrollView dengan satu item dapat digunakan untuk memungkinkan pengguna memperbesar konten. Mengatur maximumlZoomScale dan minimumZoomScale alat peraga dan pengguna Anda akan dapat menggunakan sejumput dan gerakan memperluas untuk memperbesar dan memperkecil.
Baca Juga :
21 Contoh Algoritma dan Flowchart
Apa itu HTML ? Inilah Tutorial Lengkapnya
16 Prospek Kerja Sistem Informasi yang Menjanjikan
Itulah scrollview pada react native, cukup singkat memang. Selanjutnya kita akan membahas bagaimana kita membuat daftar /list pada React Native.
Silahkan berkomentar jika ada pertanyaan dan jangan lupa share. Sampai jumpa 😊