Basic React Native Part 14 - React Native Button

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

Button merupakan component React Native yang berfungsi untuk memberikan suatu aksi ketika Button tersebut diklik oleh user atau pengguna. Button merupakan komponen tombol dasar yang harus kita ketahui dan memahami cara penggunaan component tersebut.

Button adalah merupakan salah satu komponen kontrol antarmuka pengguna untuk menangani sentuhan. Component Button memiliki prop “color” untuk mengubah warna Button namum pada Component Button ini kita dapat menerapkan style.

Component Button tidak dapat digunakan seperti ini <button> text </ button> tapi hanya dapat digunakan metode melalui properti title seperti berikut <title tombol = "text" />.

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 component Button 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,
StyleSheet,
Button
}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 (
      <View style={styles.container}> 
      <Text>Awal Implementasi Component Button</Text>
      <Button title='Klik Saya'/>
      </View>
    )
  }
}

• Setelah itu tambahkan code style setelah code class tersebut.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

• Dan export class App

export default App

Export Class App

• Tampilan seperti berikut

Tampilan Button

• Kemudian agar ketika Button tersebut menghasil aksi atau action maka tambahkan code berikut ini. Tambahkan onPress={() => alert('Saya Telah Diklik') setelah title di Component Button.

 <Button title='Klik Saya' onPress={() => alert('Saya Telah Diklik')}/>

Tambahkan onPress

• Maka ketika Button diklik akan tampilan seperti berikut.

Button

Demikianlah Pembahasan Tutorial Part 14 akan kita bahasa pada Tutorial Part 15

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