Basic React Native Part 6 - React Native View

Pada  Part 5 kita telah belajar dan mengenal Stuktur File, Function dan Class Component jadi jika anda belum mengikuti tutorial Part 5 diharapkan anda mengikuti tutorial Part 5terlebih dahulu.

Pada Tutorial Part 6 ini kita mengenal terlebih dahulu Basic React Native View. View merupakan Component dari React Native yang berguna untuk mengatur dan menyesuaikan tampilan yang kita buat dengan ukuran layar berdasarkan Handphone yang digunakan.

View adalah merupakan wadah yang digunakan untuk menyimpan beberapa komponen. View dirancang untuk digunakan dengan stylesheet untuk kejelasan dan kinerja, gaya inline juga didukung seperti css.

Setiap kali kita ingin menggunakan Component - Component dari React Native lebih dari Satu baik itu menggunakan Class Component atau Function Component dengan diawali <View> kemudian diakhir dengan Tag berikut ini </View>.

Mengimplementasikan Pada Project React Native

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

Menghapus Code Default App.js

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

• Import React

import React, { Component } from 'react'

import react

• Import Component Yang Dibutuhkan Untuk Project React Native

import {
View,
Text
}from 'react-native'

Import Component

• Membuat Class Componet

class App extends Component {
  render() { 
    return (  );
  }
}
 

Membuat Class

• Tambahan Component View dan Text di dalam return()

class App extends Component {
  render() { 
    return (
    //Tambahkan Component View
      <View>
        <Text>Wandi Pratama</Text>
      </View>
     );
  }
}

Tambahkan Component

• Jangan Lupa di export class App dengan code berikut ini

export default App

export class

• berikut code lengkapnya

import React, {Component} from 'react'
import {
  View,
  Text
}from 'react-native'

class App extends Component {
  render() { 
    return ( 
      <View>
        <Text>Wandi Pratama</Text>
      </View>
     );
  }
}
 
export default App;

Code Lengkap

Code Lengkap

• Berikut tampilan Hasil code

Tampilan Menggunakan Class Component

Kemudian kita juga dapat menggunakan function component untuk menampilkan text pada apikasi kita dengan cara mengganti class component pada file App.js dengan Funtion Component. Berikut code Funtion Component.

const App = () => {
  return(
    <View>
      <Text>Wandi Pratama Dengan Function</Text>
    </View>
  )
}

Function Component

Untuk Code Versi Lengkap dengan Menggunakan Function Component berikut ini.

import React, {Component} from 'react'
import {
  View,
  Text
}from 'react-native'

const App = () => {
  return(
    <View>
      <Text>Wandi Pratama Dengan Function</Text>
    </View>
  )
}
  
export default App;

Function Component

Tampilkan menggunakan Function Component

Tampilan Menggunakan Function Component

Demikianlah pembahasan Tutorial Part 6 ini akan kita lanjutakan pada Tutorial Part 7

Catatan: tulisan ini dipindahkan dari cloudborneo.com, terbit pertama 30 Desember 2019.