Devy Ferdiansyah, M. Kom

Kumpulan BLOG dan VLOG Pribadi Koe

Scroll Layar

1 min read

Untuk membuat sebuah tampilan dengan fasilitas scroll layar maka kita membutuhkan ScrollView. ScrollView adalah sebuah kotak tampilan yang memperbolehkan layar di scroll jika konten melebihi layar utama. Konten dari ScrollView dapat bermacam bentuk, boleh gabungan karakter, gambar dan lain-lain.

ScrollView dapat diatur sesuai dengan keinginan dari sipembuatnya, yaitu bisa dibuat “Horizontal” maupun “Vertical”. berikut adalah contoh program untuk tampilan layar dengan menggunakan ScrollView:

 

import React, { Component } from 'react';
import { ScrollView, Image, Text } from 'react-native';

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return (
        <ScrollView>
          <Text style={{fontSize:100}}>Geser kebawah duuunk</Text>
          <Image source={{uri: "http://devyferdiansyah.com/wp-content/uploads/2019/04/200609020crop-2.jpg", width: 400, height: 400}} />
          <Text style={{fontSize:100}}>Suka gak??</Text>
          <Image source={{uri: "http://devyferdiansyah.com/wp-content/uploads/2019/04/200609020crop-2.jpg", width: 400, height: 400}} />
          <Text style={{fontSize:100}}>Kalo suka, geser kebawah lagi</Text>
          <Image source={{uri: "http://devyferdiansyah.com/wp-content/uploads/2019/04/200609020crop-2.jpg", width: 400, height: 400}} />
          <Text style={{fontSize:100}}>Selamat</Text>
          <Image source={{uri: "http://devyferdiansyah.com/wp-content/uploads/2019/04/200609020crop-2.jpg", width: 400, height: 400}} />
          <Text style={{fontSize:100}}>Belajar</Text>
          <Image source={{uri: "http://devyferdiansyah.com/wp-content/uploads/2019/04/200609020crop-2.jpg", width: 400, height: 400}} />
          <Text style={{fontSize:100}}>React Native</Text>
        </ScrollView>
    );
  }
}

Tampilan hapenya bakalan kaya begini nih

Selamat Mencoba…..

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *