Blog

Belajar React Native - Modul-Modul React Native

by
published on
Belajar React Native - Modul-Modul React Native

Pada dasarnya, modul React Native adalah library Javascript atau JSX.

Ada modul yang sudah ada secara default bersama React Native yang telah terinstall.

Ada juga modul yang harus diinstall dahulu agar dapat digunakan.

Modul yang pertama tadi tidak perlu diinstall dengan NPM agar dapat digunakan, sedangkan modul yang terakhir harus diinstall terlebih dahulu dengan NPM.

Modul bawaan maupun yang sudah terinstall kemudian diinclude ke dalam script React Native kita dengan import .

Selain itu, kita juga bisa membuat modul sendiri dan menginclude-nya pada script lain seperti yang telah kita lakukan pada bab Component.

Modul Bawaan

Modul bawaan React Native dapat dibagi menjadi Component dan API.

Component pada umumnya merupakan modul UI yang dirender di layar perangkat mobile, sedangkan API pada umumnya adalah modul yang bekerja di balik layar.

Berikut ini adalah beberapa contoh modul Component dan API pada React Native.

Image

Image adalah Component React Native yang berguna untuk menampilkan gambar.

Untuk mengimpor Image dari React Native, kita tinggal menulis kode ini:

import { Image } from 'react-native';

Untuk menampilkan Image di layar perangkat mobile, ada beberapa cara.

Cara pertama adalah melalui gambar statis:

<Image
	source={require('./gambar_anda.png')}
	style={{width: 800, height: 600}}
/>

Cara kedua adalah melalui URL:

<Image
	source={{uri: 'https://situsanda.com/gambar_anda.png'}}
	style={{width: 800, height: 600}}
/>

Cara ketiga adalah melalui data base64 gambar Anda:

<Image
style={{width: 100, height: 100}}
source=
{{uri:'data:image/png;base64,iVSA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7d
SxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBg
bmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
/>

Style digunakan untuk menentukan ukuran gambar.

Letakkan kode tadi pada method render jika Anda membuat Class Based Component.

Jika Anda membuat Functional Component, letakkan pada bagian return.

Button

Button adalah Component React Native yang memungkinkan pengguna untuk mendapatkan respon dari pengeklikan suatu tombol.

Jika Anda menginginkan tombol sederhana (yang penting bisa diklik) Anda sebaiknya menggunakan <Button /> .

Akan tetapi, jika Anda menginginkan tombol yang bisa dikustomisasi penuh, gunakan <TouchableOpacity/> atau yang semacamnya seperti yang telah kita bahas pada Functional Component dan Class Based Component.

Dengan cara itu, Anda bisa menentukan sendiri style dari Touchables tadi.

Untuk mengimpor Button, anda hanya perlu menulis:

import { Button } from 'react-native';

Untuk menampilkannya:

<Button
onPress={handlerAnda}
title="Text Tombol"
color="#ff00ff"/>

Letakkan kode tadi pada method render jika Anda membuat Class Based Component.

Jika Anda membuat Functional Component, letakkan pada bagian return .

Picker

Picker adalah Component yang memungkinkan pengguna untuk memilih satu dari beberapa pilihan.

Picker adalah serupa dengan Dropdown jika Anda familiar dengan pemrograman web.

Untuk mengimpor Picker, anda hanya perlu menulis:

import { Picker } from 'react-native';

Untuk menampilkannya:

<Picker>
	<Picker.Item label = "label1" value = "value1" />
	<Picker.Item label = "label2" value = "value2" />
</Picker>

Letakkan kode tadi pada method render jika Anda membuat Class Based Component.

Jika Anda membuat Functional Component, letakkan pada bagian return .

Switch


Switch adalah Component untuk menampilkan dan menerima nilai boolean.

Switch memiliki satu nilai dari true atau false.

Untuk mengimpor Switch, anda hanya perlu menulis:

import { Switch } from 'react-native';

Untuk menampilkannya:

<Switch
onValueChange = {handlerAnda}
value = {nilaiAwalTrueAtauFalse}/>

Letakkan kode tadi pada method render jika Anda membuat Class Based Component.

Jika Anda membuat Functional Component, letakkan pada bagian return .

Clipboard

Clipboard adalah API React Native untuk media penyimpanan sementara untuk data yang kita copy atau paste.

Untuk mengimpor Clipboard, anda hanya perlu menulis:

import { Clipboard } from 'react-native';

Untuk melakukan copy:

const clipboardContent = await Clipboard.getString();

Untuk melakukan paste:

await Clipboard.setString(this.state.text);

Anda bisa meletakkan 2 kode di atas di manapun asalkan sesuai dengan kebutuhan.

Linking

Linking adalah API React Native yang memungkinkan kita diarahkan ke URL tertentu.

Untuk mengimpor Linking, anda hanya perlu menulis:

import { Linking } from 'react-native';

Cara penggunaannya:

Linking.openURL('https://situsanda.com');

Anda bisa meletakkan kode di atas di manapun asalkan sesuai dengan kebutuhan.

Pada umumnya Linking digunakan sebagai implementasi dari handler, entah itu tombol atau apapun yang cocok.

Modul Luar

Selain modul bawaan, ada juga modul luar yang harus diinstall terlebih dahulu sebelum dapat digunakan.

Untuk menginstallnya, kita menggunakan perintah NPM:

npm install <nama_package>

Jadi, jika kita ingin menginstall axios:

npm install axios

NPM bisa menginstall modul secara local maupun global.

Secara default, NPM menginstall modul secara local.

Secara local, modul akan diinstall dalam folder "node_modules" yang ada di dalam folder dimana perintah NPM dijalankan.

Jadi, jika kita menjalankan perintah NPM dalam folder "C:\Nodejs", maka lokasi folder "node_modules" berada di dalam folder tersebut.

Agar modul terinstall secara global, tambahkan parameter -g:

npm install axios -g

Dengan cara ini, modul terinstall di dalam folder global yang berbeda-beda lokasinya di setiap OS.

Jika kita menggunakan Windows, maka folder global tersebut ada di:

"C:\Users<nama_user>\AppData\Roaming\npm\node_modules"

Jika kita menggunakan Linux, maka folder itu ada di:

"/usr/local/lib/node"

Atau di:

"/usr/local/lib/node_modules"

Lokasi folder global tersebut bisa dicek dengan perintah ini:

npm root -g

Penginstalan modul juga dapat diatur sehingga modul yang terinstall didaftarkan dalam bagian "dependencies" pada file "package.json".

Jika sudah didaftarkan di sana, kita bisa menginstall kembali semua modul dengan satu perintah:

npm install

Agar modul yang diinstall didaftarkan dalam package.json, gunakan parameter --save:

npm install axios --save

Tapi untuk versi NPM terbaru, kita tidak perlu menambahkan parameter --save lagi untuk melakukan itu, karena NPM secara otomatis menambahkan modul ke dependencies tanpa perlu parameter tambahan.

Selain itu, agar modul terinstall didaftarkan di devDependencies, gunakan parameter --save-dev:

npm install axios --save-dev

Dengan cara itu, ketika kita melakukan:

npm install

Maka baik modul dalam dependencies maupun devDependencies akan terinstall.

Akan tetapi jika kita melakukan:

npm install only=production

Modul dalam devDependencies tidak akan terinstall.

Modul juga dapat di-uninstall dengan cara ini:

npm uninstall <nama_package>

Jadi jika ingin menguninstall axios, begini caranya:

npm uninstall axios

Selanjutnya, Anda tinggal mengimport modul tersebut:

import axios from "axios";

Modul Sendiri

Selain kedua jenis modul tadi, kita juga bisa membuat modul sendiri.

Prinsip kerjanya adalah dengan mengexport Component yang kita buat seperti yang dilakukan pada subbab Props dan Style di bab Component:

export default FunctionalTombol;

Kemudian mengimportnya dengan cara ini:

import FunctionalTombol from "./components/FunctionalTombol";

Perlu diingat juga, bahwa kita bisa mengimport component sekaligus dalam satu folder dengan cara mengexportnya begini:

export { Welcome };

Kemudian membuat index.js begini:

export * from "./Welcome";
export * from "./NamaToko";
export * from "./AlamatToko";

Yang diimport dengan cara begini:

import { Welcome, NamaToko, AlamatToko } from "./common";//yang diimport adl index.js

Untuk membaca bab-bab studi kasus tutorial ini, baca ebook "Javascript for Everything" ini.