Basic React Native Part 13 - React Native ScrollView

react-native • Jan 02, 2020

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

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

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

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

Recommended for you

No results for your search, try something different.