Lewati ke isi
Sabtu, 7 November 2026 Tutorial & berita teknologi Tentang Kontak
Komputerkampus.com
Beranda Berita Artikel Tutorial Penulis Pengumuman Unduhan Kontak Masuk
Tutorial Android & React Native Basic React Native · Bab 13 dari 30

Basic React Native Part 13 - React Native ScrollView

PadaPart 12 [/basic-react-native-part-12-react-native-image/]kita telah belajar dan mengenal Image jadi jika anda belum mengikuti tutorial Part 12 [/basic-react-native-part-12-react-native-image/] diharapkan anda mengikuti tutorialPart 12 […

Wandi Pratama
Oleh Wandi Pratama
7 menit baca
Daftar isi 2 bagian
  1. Mengimplementasikan Pada Project React Native
  2. ScrollView

Pada  Part 12 kita telah belajar dan mengenal Image jadi jika anda belum mengikuti tutorial Part 12 diharapkan anda mengikuti tutorial  Part 12 terlebih dahulu. Pada Tutorial Part 13 ini kita mengenal terlebih dahulu Basic React Native ScrollView.

Mengimplementasikan Pada Project React Native

ScrollView

Scrollview adalah suatu component react native yang memungkinkan untuk scroll atau menggulir Tampilan dari beberapa tampilan yang ada saat itu. Scrollview memiliki 2 jenis mode:

  • Scrollview Vertikal
  • Scrollview Horizontal

Buat Project React Native

Pada Tutorial Part 2 kita telah menginstall react-native-cli kemudian kita telah belajar cara membuat project baru react native. Berikut perintah cara untuk membuat project baru react native.

react-native init namafolderproject

Buat Project Baru

Install Aplikasi Debug Ke Handphone Android

Pada Tutorial Part 4 kita telah belajar cara menginstall Aplikasi Debug ke Handphone Android, untuk tata cara yang lebih jelas bisa langsung pelajari lagi pada Tutorial Part 4 terlebih dahulu. Secara singkat perintahnya seperti berikut.

react-native run-android

Install Aplikasi Debug Ke Handphone Android

Buka File App.js Dengan Visual Studio Code

Secara default pada file App.js memiliki code yang cukup dan menghasilkan tampilkan seperti berikut ini

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

Code Default App.js

Tampilan Default File App.js

Tampilan Default File App.js

Menghapus Code Default App.js

Untuk memudahkan memahami componen Scrollview kita hapus semua code dafault App.js. Setelah semua code default App.js dihapus maka ikuti langkah - langkah berikut ini.

Scrollview Vertikal

  • Import React
import React, { Component } from 'react'

import react

  • Import Component Yang Dibutuhkan Untuk Project React Native
import {
View,
Text,
StyleSheet,
ScrollView
}from 'react-native'

Import Component

  • Membuat Class Componet
class App extends Component {
  render() { 
    return (  );
  }
}

Membuat Class

  • Kemudian tambahkan code berikut pada return() di dalam class.
class App extends React.Component {
  render() {
    return (
      // tambahkan Component ScrollView, View , Text
      <ScrollView>
      <View style={styles.container}>
      <Text>Awal Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Akhir Implementasi Component ScrollView Vertikal</Text>
      </View>
      </ScrollView>
    )
  }
}

Penambahan Component ScrollView, View, Text

  • Menambahkan code style sebelum export default App
//tambahan code style
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

Code Style

  • Setelah itu export Class App
export default App

Code Export Class

  • Code Lengkap 
import React from 'react'
import { View, Text, StyleSheet, ScrollView } from 'react-native'

class App extends React.Component {
  render() {
    return (
      // tambahkan Component View , Image
      <ScrollView>
      <View style={styles.container}>
      <Text>Awal Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Akhir Implementasi Component ScrollView Vertikal</Text>
      </View>
      </ScrollView>
    )
  }
}
//tambahan code style
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
})

export default App

Code Lengkap

  • Tampilan ScrollView Vertikal

Tampilan ScrollView Vertikal

Tampilan ScrollView Vertikal

Scrollview Horizontal

Untuk menerapkan ScrollView Horizontal kita hanya perlu menambahkan horizontal pada component <Scrollview> yang terletak diawal code.

  • Mengubah <ScrollView> menjadi <ScrollView horizontal>
<ScrollView horizontal>

scrollview horizontal

  • Kemudian menambahkan flexDirection : 'row' pada code style.
container: {
    flex: 1,
    flexDirection:'row', // Tambahkan disini
    justifyContent: 'center',
    alignItems: 'center'
  },
  • Code Lengkap 
import React from 'react'
import { View, Text, StyleSheet, ScrollView } from 'react-native'

class App extends React.Component {
  render() {
    return (
      // tambahkan Component View , Image
      <ScrollView horizontal> {/* Rubah seperti ini */}
      <View style={styles.container}>
      <Text>Awal Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Implementasi Component ScrollView Vertikal</Text>
      <Text>Akhir Implementasi Component ScrollView Vertikal</Text>
      </View>
      </ScrollView>
    )
  }
}
//tambahan code style
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row', //Tambahkan disini
    justifyContent: 'center',
    alignItems: 'center'
  },
})

export default App

Code Lengkap ScrollView Horizontal

  • Tampilan ScrollView Horizontal

Tampilan Scrollview Horizontal

Tampilan Scrollview Horizontal

Demikianlah pembahasan Tutorial Part 13 ini akan kita lanjutkan pada Tutorial Part 14

Catatan: tulisan ini dipindahkan dari cloudborneo.com, terbit pertama 2 Januari 2020.

Bagikan WhatsApp Telegram X

Tentang penulis

Wandi Pratama
Wandi Pratama

Saya seorang Developer Mobile menggunakan Framework React Native dan saya juga memiliki pengalaman dibidang SYS Admin. Jasa menerima jasa pembuatan aplikasi dan website https://pindahdigital.com

Tulisan lainnya

Terkait