React Native - Touchables dan Dimensi Layar

React Native membuat proses pengembangan aplikasi yang bekerja pada perangkat Android dan iOS jauh lebih mudah daripada sebelumnya. Meskipun sebelumnya Anda harus bekerja dengan setidaknya dua bahasa pemrograman dan API yang sangat berbeda, React Native menyertakan beberapa yang membantu di luar kotak.

Berikut adalah dua ikhtisar yang akan membantu Anda membangun aplikasi berikutnya.

Dapat disentuh

Beberapa fitur utama perangkat seluler berkisar pada interaksi sentuhan pengguna. Bagaimana aplikasi seluler menangani dan merespons interaksi ini dapat membuat atau menghancurkan pengalaman pengguna.

React Native dikirimkan dengan Buttonkomponen yang berfungsi untuk banyak onPressinteraksi standar . Secara default, ini akan memberikan umpan balik kepada pengguna dengan mengubah opasitas untuk menunjukkan tombol ditekan. Pemakaian:

Untuk kasus penggunaan yang lebih kompleks, React Native memiliki API yang dibangun untuk menangani interaksi pers yang dipanggil Touchables.

TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback

Masing-masing komponen Touchable ini dapat ditata dan digunakan dengan perpustakaan, seperti bawaan Animated, memungkinkan Anda membuat jenis umpan balik pengguna khusus Anda sendiri.

Beberapa contoh penggunaan komponen ini:

// with images    // with text  Hello 

Anda juga dapat menangani berbagai jenis penekanan tombol. Secara default, tombol dan perangkat sentuh dikonfigurasi untuk menangani ketukan biasa, tetapi Anda juga dapat menunjukkan fungsi untuk memanggil interaksi tekan dan tahan misalnya.

Untuk melihat semua props yang tersedia dan bagaimana komponen ini bekerja, Anda dapat melihat kode sumber JavaScript untuk Touchable di sini.

Dimensi Layar

React Native menggunakan Dots Per Inch (DPI) untuk mengukur ukuran Antarmuka Pengguna (UI) dan apa pun yang ditampilkan di UI. Jenis pengukuran ini memungkinkan aplikasi terlihat seragam di berbagai ukuran layar dan kepadatan piksel.

Untuk kasus penggunaan standar, aplikasi dapat dikembangkan tanpa harus mengetahui perangkat pengguna secara spesifik (misalnya, kepadatan piksel) karena elemen UI akan diskalakan secara otomatis.

Jika diperlukan, ada API yang tersedia seperti PixelRatiountuk membantu Anda mengetahui kepadatan piksel perangkat pengguna.

Untuk mendapatkan tinggi / lebar jendela atau layar perangkat pengguna, React Native memiliki API yang disebut Dimensions.

import { Dimensions } from 'react-native';

Berikut metode yang Dimensionsdisediakan API:

Dimensions.get('window').height; Dimensions.get('window').width; Dimensions.get('screen').height; Dimensions.get('screen').width;

Catatan: Ada beberapa masalah umum di masa lalu dengan API Dimensi seperti tidak mengembalikan informasi yang benar saat pengguna memutar perangkat mereka.Sebaiknya pastikan Anda mengujinya pada perangkat sebenarnya sebelum menerapkan aplikasi.

Info lebih lanjut tentang desain responsif:

  • Kursus desain responsif gratis
  • Tutorial Bootstrap terbaik untuk desain web responsif
  • Bagaimana berpikir secara responsif
  • Panduan untuk gambar responsif
  • Pelajari desain responsif dalam 5 menit