Memulai Membuat Tampilan Login
Sebelum memulai membuat tampilan pastikan anda telah mengikuti semua tutorial
Install React Native pada post sebelumnya. Apabila sudah anda menuju directory project anda pada CMD lalu jalankan emulator atau project pada android anda, maka tampilannya akan seperti gambar dibawah ini.
1. Edit App.js
Untuk merubah tampilan diatas anda cukup membuka App.js pada directory project anda, lalu anda dapat mengubahnya seperti gambar dibawah ini.
2. Membuat Folder dan File Baru
Setelah mengedit App.js, buatlah sebuah folder src yg didalamnya terdapat folder Component (Berisi Form.js & Logo.js), Images (Foto Logo), Pages (Login.js & Signup.js) dan file Routes.js. Contoh seperti gambar dibawah.
3. Membuat Form & Logo.js
Buatlah file baru bernama Form.js berisi coding dibawah ini dan simpan di src > components.
Setelah itu
buat juga file Logo.js seperti gambar dibawah dan simpan di
src > components.
4. Simpan File Foto Logo pada Folder Images
Simpan file foto untuk logo apk anda pada folder images yg telah dibuat tadi, usahakan foto tersebut sudah di edit agar dapat memungkinkan cocok pada tampilan android.
5. Membuat file Login & Signup.js
Buatlah sebuah file bernama Login.js dengan berisi codingan dibawah ini dan simpan di src > pages.
Setelah itu buat juga file bernama Signup.js dengan codingan dibawah ini, lalu simpan di src > pages.
6. Membuat file Routes.js
Buatlah sebuah file bernama Routes.js berisi codingan dibawah ini, lalu simpan di src.
7. Re Run React Native
Jalankan kembali react native pada android anda di cmd dengan cara npx react-native run-android.
Apabila mengalami error seperti diatas berarti anda harus mendownload/menginstall terlebih dahulu modul yg diperlukan seperti yg ditulis diatas yaitu react-native-router-flux. Cara installnya cukup mudah, anda hanya perlu ketikan yarn add react-native-router-flux pada cmd dan tunggu prosesnya hingga selesai.
Setelah itu re run kembali react native anda.
Apabila masih mengalami error seperti diatas, anda harus kembali mendownload/menginstall modul yg dibutuhkan kembali seperti yg tertera pada error kembali hingga project anda dapat berhasil di run.
Apabila project anda berhasil dijalankan, contoh outputnya akan seperti gambar dibawah ini.
Dengan begitu anda sudah berhasil untuk membuat tampilan login pada react native anda.
Ingat bahwa anda dapat mengedit coding diatas dengan kreatifitas anda.
~ Terima Kasih sudah membaca tutorial ini semoga bermanfaat, maaf bila ada kesalahan dan kekurangan ~
Komentar
Posting Komentar