Belajar React Native 6 : Handling Touches

Sekarang kita akan membahas tutorial tentang Belajar React Native Handling Touches.

Maksud dari Handling Touches pada React Native ini adalah dimana pengguna berinteraksi dengan aplikasi  melalui sentuhan. Handling Touches dapat menggunakan kombinasi gerakan, seperti mengetuk tombol, menggulir daftar, atau memperbesar peta.

Ternyata React Native sudah menyediakan komponen untuk menangani semua jenis gerakan tubuh yang umum, dan juga sistem respek gerakan isyarat yang komprehensif untuk memungkinkan pengenalan gerak lebih lanjut, namun komponen yang paling sering ditemui adalah Tombol dasar.

Belajar React Native Handling Touches

1. Menampilkan tombol dasar

React Native menyediakan komponen tombol dasar yang diberikan dengan baik pada semua platform.

Contoh kecil untuk menampilkan tombol terlihat seperti ini:

<Button

  onPress={() => {

    Alert.alert('You tapped the button!');

  }}

  title="Press Me"

/>

Perintah diatas membuat label biru pada perangkat iOS, dan kotak biru bulat dengan teks putih di Android. Menekan tombol akan memanggil fungsi “onPress”, dalam hal ini menampilkan popup peringatan.

Kita bisa menentukan prop “color” untuk mengubah warna tombol.

2. Membuat perintah button dengan Handling Touches

Oke sekarang kita akan membuat sebuah perintah button dengan metode Handling Touches ini.

Seperti biasa kita siapkan terlebih dahulu alat-alat tempur kita, pada code editor silahkan beri code perintah baru pada index.android.js dalam class HelloBadoy karena saya masih menggunakan HelloBadoy dengan melanjutkan tutorial sebelumnya.

Baris codenya seperti berikut :

import React, { Component } from 'react';

import {

  Alert, AppRegistry, Button, StyleSheet, View

} from 'react-native';



export default class HelloBadoy extends Component {



  _onPressButton() {

    Alert.alert('You tapped the button!')

  }



  render() {

    return (

      <View style={styles.container}>

        <View style={styles.buttonContainer}>

          <Button

            onPress={this._onPressButton}

            title="Press Me"

          />

        </View>

        <View style={styles.buttonContainer}>

          <Button

            onPress={this._onPressButton}

            title="Press Me"

            color="#841584"

          />

        </View>

        <View style={styles.alternativeLayoutButtonContainer}>

          <Button

            onPress={this._onPressButton}

            title="This looks great!"

          />

          <Button

            onPress={this._onPressButton}

            title="OK!"

            color="#841584"

          />

        </View>

      </View>

    );

  }

}



const styles = StyleSheet.create({

  container: {

   flex: 1,

   justifyContent: 'center',

  },

  buttonContainer: {

    margin: 20

  },

  alternativeLayoutButtonContainer: {

    margin: 20,

    flexDirection: 'row',

    justifyContent: 'space-between'

  }

})

Silahkan tap double R pada keyboard kalian maka tampilannya akan terlihat seperti berikut.

Dan jika kita tekan semua tombol tersebut maka akan memunculkan ketrangan popup yang tampilannya seperti berikut.

3. Komponen Touchables

Jika tombol dasarnya tidak sesuai untuk aplikasi, kita dapat membuat tombol sendiri menggunakan komponen “Touchable” yang disediakan oleh React Native.

Komponen “Touchable” memberikan kemampuan untuk menangkap gerakan mengetuk, dan dapat menampilkan umpan balik saat isyarat dikenali.

Komponen ini tidak memberikan styling default, namun Anda perlu melakukan sedikit pekerjaan untuk membuat mereka terlihat bagus di aplikasi Anda.

Berikut Komponen “Touchable” yang Anda gunakan akan bergantung pada jenis umpan balik yang ingin Anda berikan:

• Umumnya, kita dapat menggunakan TouchableHighlight di manapun kita menggunakan tombol atau tautan di web. Latar belakang tampilan akan menjadi gelap saat pengguna menekan tombolnya.
• Kita dapat mempertimbangkan untuk menggunakan TouchableNativeFeedback di Android untuk menampilkan riak reaksi permukaan tinta yang merespons sentuhan pengguna.
• TouchableOpacity dapat digunakan untuk memberikan umpan balik dengan mengurangi keburaman tombol, memungkinkan latar belakang dilihat saat pengguna menekan ke bawah.
• Jika kita  perlu menangani gerakan tekan tapi  tidak ingin ada umpan balik yang akan ditampilkan, gunakan TouchableWithoutFeedback.

Dalam beberapa kasus, kita mungkin ingin mendeteksi saat pengguna menekan dan menahan pandangan untuk menetapkan jumlah waktu tertentu.

Tekanan panjang ini dapat ditangani dengan melewatkan fungsi ke alat pengikat onLongPress dari komponen “Touchable” manapun.

Let’s see all of these in action gaessssssssss :V ,,, kita akan mengubah kembali baris perintah code kita tadi menjadi seperti berikut :

import React, { Component } from 'react';

import {

  Alert, AppRegistry, Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View

} from 'react-native';



export default class HelloBadoy extends Component {



  onPressButton() {

    Alert.alert('You tapped the button!')

  }



  _onLongPressButton() {

    Alert.alert('You long-pressed the button!')

  }



  render() {

    return (

      <View style={styles.container}>

        <TouchableHighlight onPress={this._onPressButton} underlayColor="white">

          <View style={styles.button}>

            <Text style={styles.buttonText}>TouchableHighlight</Text>

          </View>

        </TouchableHighlight>

        <TouchableOpacity onPress={this._onPressButton}>

          <View style={styles.button}>

            <Text style={styles.buttonText}>TouchableOpacity</Text>

          </View>

        </TouchableOpacity>

        <TouchableNativeFeedback

            onPress={this._onPressButton}

            background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>

          <View style={styles.button}>

            <Text style={styles.buttonText}>TouchableNativeFeedback</Text>

          </View>

        </TouchableNativeFeedback>

        <TouchableWithoutFeedback

            onPress={this._onPressButton}

            >

          <View style={styles.button}>

            <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>

          </View>

        </TouchableWithoutFeedback>

        <TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">

          <View style={styles.button}>

            <Text style={styles.buttonText}>Touchable with Long Press</Text>

          </View>

        </TouchableHighlight>

      </View>

    );

  }

}



const styles = StyleSheet.create({

  container: {

    paddingTop: 60,

    alignItems: 'center'

  },

  button: {

    marginBottom: 30,

    width: 260,

    alignItems: 'center',

    backgroundColor: '#2196F3'

  },

  buttonText: {

    padding: 20,

    color: 'white'

  }

})

Maka tampilannya akan terlihat seperti berikut, dan masing-masing tombol mempunyai fungsi yang telah kita perintahkan pada baris kode yang kita buat tadi :

Oke gaesssss.. sekian tutorial kali ini. Pada tutorial selanjutnya saya akan membahas tentang Scrollview pada React Native.

Silahkan berkomentar jika ada error atau pertanyaan lainnya. Jangan lupa share dan Sampai jumpa 😊