Belajar React Native 7 : Menggunakan ScrollView

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).

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.

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.

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 😊