Jadi mari kita mulai dengan menerapkan otentikasi dan satu langkah yang sangat penting ke arah itu adalah bahwa kita
menambahkan layar baru, layar auth yang merupakan layar yang harus menyajikan formulir masuk atau mendaftar yang dapat digunakan pengguna
untuk masuk atau mendaftar dan karenanya di sini di
layar auth, saya akan mengimpor reaksi dari reaksi dan saya
juga akan mengimpor beberapa hal dari Bereaksi Asli karena dari sana, dari Bereaksi Asli, saya ingin memiliki tampilan
gulir karena kami akan membangun formulir dan saya ingin pastikan bahwa pengguna di semua ukuran
perangkat dapat berinteraksi dengannya.
Saya akan menambahkan stylesheet di sini dan seharusnya itu untuk saat ini, kami selalu dapat
menambahkan lebih banyak jika kami membutuhkan lebih banyak.
Kami juga sudah bisa menyertakan tampilan dan keyboard menghindari tampilan Saya kira untuk memastikan bahwa semua
input selalu dapat dijangkau.
Sekarang berbicara tentang input, tentu saja kami akan menambahkan formulir dan oleh karena itu saya akan menggunakan kembali komponen
input yang kami buat di bagian formulir yang dapat saya temukan di folder komponen UI.
Jadi, pastikan Anda menonton bagian ini untuk mengetahui apa yang komponen ini lakukan dan bagaimana
kami dapat mengelola formulir dengannya.
Dengan itu, kita dapat membuat komponen layar auth di sini yang menerima alat peraga dan kita
juga dapat membuat objek gaya dengan stylesheet, metode
buat di sana dan tentu saja mengekspor layar auth, seperti ini.
Sekarang jelas pertanyaannya sekarang juga adalah, bagaimana kita menyajikan layar auth ini? Bagaimana kita memastikan bahwa kita melihat
ini jika kita tidak masuk?
Nah, itu sesuatu yang akan kita perbaiki sepanjang modul ini, tetapi untuk memulai, kita bisa pergi
ke navigator dan memastikan bahwa ketika aplikasi diluncurkan, kita melihat layar auth dan untuk ini kita dapat menggunakan
navigator baru khusus yang belum kita miliki. digunakan sebelum yang secara khusus dibangun untuk, Anda hampir bisa mengatakan
untuk kasus penggunaan otentikasi ini dan bahwa fungsi navigator membuat saklar yang membantu kami di
sana, sehingga ia menciptakan navigator saklar seperti itu. Hal khusus tentang navigator ini adalah selalu menampilkan
tepat satu layar dan Anda tidak dapat kembali ke layar lain jika Anda menavigasi ke yang lain.
Jadi kembali secara eksplisit tidak diperbolehkan, itulah yang kami inginkan karena Anda seharusnya tidak
dapat kembali ke layar masuk jika Anda baru saja masuk.
Jadi oleh karena itu di sini di bagian bawah file, saya akan membuat navigator baru, mungkin navigator
utama saya, nama terserah Anda tentu saja, dengan membuat navigator saklar dan sama seperti sebelumnya, navigator ini mengambil argumen
di mana kita mengkonfigurasi itu, jadi objek di mana kita mengkonfigurasinya dan di sana, saya ingin mengikat layar
auth dan juga tentu saja tumpukan toko saya sesudahnya. Sekarang untuk memiliki header yang bagus, saya juga
akan membuat navigator auth saya di sini yang merupakan navigator stack yang dibuat dengan create stack navigator dan di sana, saya hanya
akan memetakan layar auth yang baru saja saya mulai kerjakan dan untuk
ini tentu saja, kami perlu mengimpornya, jadi di ShopNavigator itu. File js, kita dapat mengimpor layar auth dari layar auth pengguna
seperti ini
dan dengan impor yang ditambahkan, jika kita turun, kita memetakan ini di sini untuk auth di navigator auth dan
navigator auth kemudian dipetakan ke auth di sini di saklar navigator dan shop tentu saja dipetakan ke navigator toko
dan sekarang ini adalah navigator utama yang kita bungkus dengan membuat wadah aplikasi dan
oleh karena itu jika kita menyimpan ini, kita benar-benar akan membuat layar auth sebagai layar
pertama yang sekarang tidak
akan membuat valid apa pun jsx, jadi kami mendapatkan kesalahan tetapi kami bisa mengatasinya tentu saja karena ada tujuannya sekarang adalah untuk
membuat layar otentikasi ini di mana kami dapat login dan melakukan hal kami. Jadi di sini, saya ingin menyajikan input ini dan saya akan benar-benar juga
mengimpor komponen kartu dari komponen kartu UI untuk melihat kartu yang bagus ini di sini dan memiliki input saya di sana dan tentu saja
ini benar-benar opsional tetapi di sini, saya akan menambahkan itu, di sini
saya akan menambahkan kartu dan di dalam kartu, kita dapat menambahkan tampilan gulir sehingga kita dapat menggulir bagian
dalam kartu itu, tentu saja Anda juga bisa menambahkan tampilan gulir di sekitar kartu
sehingga Anda dapat menggulir secara keseluruhan Layar tapi saya akan melakukannya seperti ini, juga menambahkan gaya saya sendiri di sini ke kartu yang
saya akan beri nama wadah auth mungkin, nama sepenuhnya terserah Anda dan saya juga akan membungkus pandangan di sekitar semua itu di sini sebagai
pembungkus lihat di mana saya akan menambahkan gaya yang akan saya beri nama layar. Sebenarnya di sini kita sudah bisa menggunakan keyboard menghindari tampilan saya kira
dengan perilaku padding dan kemudian keyboard ini diimbangi off katakanlah 50. Jadi sekarang di dalam tampilan gulir di sini
yang kita miliki di kartu kita, kita dapat mulai menambahkan input, input khusus yang
kita buat sebelumnya dalam kursus. Sebagai contoh di sini, input dengan ID email dan
label email karena di sana saya ingin mengambil alamat email pengguna dan oleh karena itu jenis keyboard dari alamat email
yang didukung di iOS dan Android.
Ini juga harus diminta dan saya ingin menggunakan validator email, ini adalah dua fungsi
validasi yang saya buat di input sebelumnya dalam kursus ini, juga kapitalisasi otomatis harus dimatikan jadi saya
akan set ke none karena kapitalisasi pada alamat email benar-benar tidak membantu dan
pesan kesalahan yang ingin saya tunjukkan jika ada sesuatu yang salah di sana silakan masukkan alamat email yang valid, sesuatu seperti itu.
Sekarang ketika nilai berubah, jadi pada perubahan nilai, kami ingin melakukan sesuatu tetapi untuk saat ini
saya tidak akan melakukan apa pun di sini, cukup sediakan fungsi kosong sehingga kami tidak mendapatkan kesalahan dan nilai
awal yang ingin saya tampilkan di sini, yah itu
hanya string kosong pada akhirnya karena saya tidak ingin memberikan nilai awal lainnya.
Sekarang tentu saja, ini bukan satu-satunya input, jadi saya akan mengulangi ini karena saya
juga memerlukan input kata sandi di sini dengan label kata sandi dan jenis keyboard di sini harus default karena saya ingin memiliki kata kunci teks normal
tetapi
saya ingin mengaburkan input sehingga kita tidak bisa melihatnya dan itu bisa
dilakukan dengan menambahkan untuk mengamankan entri teks di sini.
Ini tentu saja bukan penyangga yang didukung oleh komponen khusus saya
tetapi perlu diingat bahwa dalam komponen ini, kami meneruskan semua penyangga ke input teks bawaan dan input
teks bawaan mendukung properti entri teks aman ini di sini, jadi itu sebabnya saya
dapat mengatur ini. Di sini
validasi juga tidak boleh memeriksa untuk itu menjadi alamat email tetapi
pastikan bahwa kita memiliki panjang minimal misalkan lima karakter. Kapitalisasi otomatis dapat dimatikan di sini juga, pesan kesalahan akan
silakan masukkan kata sandi yang valid dan dengan itu, saya hanya melihat bahwa di sini tentu saja saya memiliki kesalahan
ketik, yang seharusnya menjadi alamat email, di sini kata sandi dan saya akan meninggalkan ini di sini apa adanya.
Sekarang untuk dapat mengirimkan ini,
saya juga perlu sebuah tombol, jadi di sini saya akan mengimpor tombol dari React Native dan menambahkan dua tombol sebenarnya di
kartu
dan karena itu juga di dalam tampilan gulir. Tombol pertama memiliki judul login katakanlah
dan kita nanti akan beralih ini menjadi login atau mendaftar tergantung pada mode
kita masuk dan warna diimpor atau ditambahkan dengan bantuan konstanta warna yang Anda harus impor
dan pada warna-warna ini konstan, saya akan menggunakan Warna. primer dan onPress pada saat ini dapat dengan mudah menunjuk pada fungsi kosong
dan saya akan mengulangi ini karena saya ingin memiliki tombol kedua di mana saya katakan
beralih untuk mendaftar dan tentu saja ini juga kemudian akan mengatakan beralih untuk masuk jika kita masuk mode atas dan di sana
kita mungkin bisa menggunakan warna aksen kita. Jika sekarang kita simpan itu, kita harus memiliki layar
login dasar, ini dia, tidak terlihat seperti seharusnya tetapi kita memiliki
input kita di sini, kita
memiliki dua tombol ini, juga pada Android setelah ini selesai memuat,
di sini kita
pergi dan sekarang tentu saja saya ingin gaya ini dengan tepat.
Jadi mari kita pergi ke
stylesheet dan harap dicatat saya memiliki dua gaya pada akhirnya ditugaskan - layar dan wadah auth, jadi di sini
dalam gaya saya ingin menambahkan layar dan wadah auth,
ini adalah dua gaya saya berencana untuk bekerja dengan. Sekarang untuk layar, saya akan mengatur flex
ke satu dan kemudian membenarkan konten saya di tengah dan menyelaraskan item di tengah untuk
memiliki keterpusatan baik
pada sumbu vertikal dan horizontal dan pada wadah auth, saya ingin
mengatur lebar katakanlah 80% untuk tidak mengambil lebar penuh yang tersedia dan lebar
maks sebenarnya dari 400 piksel dalam kasus 80% akan lebih dari itu, kami membatasi untuk 400 piksel dan mungkin ketinggian katakanlah 50% tetapi ketinggian maks dari juga 400.
Mari kita lihat seperti apa itu. Jika
kita menyimpan ini, inilah yang
saya dapatkan di sini.
Sekarang saya dapat menggulir ke sana karena saya mengatur tampilan gulir dan sebenarnya itu bukan perilaku yang
saya inginkan.
Saya tidak akan mengatur
ketinggian di sini, saya hanya akan menambahkan ketinggian max sehingga ini dibatasi
pada ketinggian tertentu tetapi secara default hanya membutuhkan ketinggian sebanyak yang diperlukan dan oleh karena
itu saya lebih suka menambahkan beberapa padding sehingga kami memiliki beberapa ruang di sekitar input dan
itu
tidak duduk di tepi kartu, jadi ini terlihat jauh lebih bagus dan mari kita lihat seperti apa itu di
Android, ya terlihat umumnya OK.
Jika saya mengetuk di sana,
ini juga menggulir ke atas sehingga keyboard menghindari tampilan melakukan tugasnya tetapi tentu saja, saya masih mendapatkan kesalahan di
sini bahwa pada perubahan input menyebabkan kesalahan karena ya, saya menambahkan perubahan
nilai di sini, yang seharusnya pada perubahan input, bukan pada perubahan nilai.
Jadi itu sedikit perbaikan tapi kami menuju ke arah yang benar.
Sekarang saya belum selesai, saya ingin memiliki judul
header dan bagaimana dengan beberapa warna latar belakang di sini, itu mungkin akan lebih baik.
Jadi untuk itu, mengenai judul header tentu saja kita bisa menambahkan AuthScreen. navigationPilihan dan bekerja dengan beberapa opsi statis untuk
saat ini karena saya hanya ingin menambahkan judul tajuk di sini dan mengatur ini
untuk silakan mengautentikasi atau hanya mengautentikasi, sesuatu seperti itu dan untuk
latar belakang,
tentu saja kita bisa memberikan pandangan kita di sini yang menyimpan segala
sesuatu warna latar belakang tapi saya sebenarnya ingin menunjukkan kepada Anda komponen baru yang belum
kami gunakan sejauh ini dan untuk ini, kami perlu menginstal paket baru dan itulah paket gradien linear-expo yang
Anda instal dengan npm install --save expo-linear-gradient.
Ini adalah paket yang memungkinkan kita untuk menambahkan
gradien linier dengan
mudah, jadi dengan cara yang sangat sederhana dan setelah ini diinstal, Anda hanya
perlu mengimpor dari expo-linear-gradient dan Anda mengimpor komponen yang diekspos ini, komponen gradien linier.
Nah, itu komponen yang dapat Anda gunakan di halaman Anda dan di sini saya akan menggunakannya di dalam keyboard
menghindari tampilan, gradien linier seperti ini dan membungkusnya di sekitar semua konten lain seperti ini di sini dan sekarang Anda dapat mengkonfigurasi
itu
dan di sana, saya ingin memastikan bahwa ini memiliki tombol warna yang memungkinkan kita untuk mengatur warna di
antara itu harus transisi karena gradien hanyalah gradien antara beberapa warna, setidaknya dua tetapi Anda
dapat menambahkan lebih banyak dan di sana Anda sekarang dapat menambahkan warna, seperti merah atau
dengan menambahkan kode hex dan saya ingin transisi antara #ffedff dan katakanlah kode hex lain, # ffe3ff dan tentu saja Anda dapat
bereksperimen dengan warna yang berbeda di sini.
Sekarang kita juga perlu menambahkan gaya di sini dan saya akan memberi nama gradien gaya ini yang sekarang dapat kita
tambahkan di sini dan gradien ini akan mengambil lebar 100% dan tinggi 100%, sehingga akan mengambil semua lebar dan tinggi
itu bisa mendapatkan, karena itu seperti ini tetapi sekarang kami memiliki
masalah, tentu saja
konten kami tidak terpusat lagi. Untuk memastikan bahwa ini masalahnya,
kita sekarang perlu menambahkan konten yang membenarkan dan menyelaraskan item lagi dan karena itu di
sini
di layar sekitarnya, kita dapat menyingkirkan itu.
Sekarang kita memiliki tampilan yang sama
seperti sebelumnya, karena itu jelas kita juga dapat mencapai ini dengan tidak mengatur lebar dan tinggi tetapi hanya melenturkannya.
Jadi sekarang dengan pengaturan ini di sini dan penting bahwa layar tidak mencoba memusatkan karena
jika tidak gradien
akan dipusatkan tetapi dengan pengaturan ini, kita sekarang memiliki tampilan ini dengan gradien yang bagus ini dan untuk melihat judul header
kita di sini, kita hanya perlu perlu memastikan bahwa dalam pengaturan navigasi, di navigator toko, kami menetapkan alat peraga
navigasi default kami ke navigator auth.
Jadi saya akan menambahkan argumen kedua untuk membuat stack navigator dan opsi navigasi default hanya menunjuk
pada opsi nav default yang mengatur warna header, warna judul header dan sebagainya.
Tentu saja, pastikan Anda tidak salah ketik di sini di opsi navigasi layar auth di layar auth
seperti yang saya lakukan.
Jadi dengan perbaikan itu, ini adalah pengaturan yang kami miliki di sini, tentu
saja Anda dapat bereksperimen dengan warna dan menggunakan warna yang berbeda
jika Anda menginginkannya, saya senang dengan itu dan sekarang satu-satunya hal yang ingin saya perbaiki di sini adalah gaya saya
untuk tombol-tombol, beberapa jarak di sekitar mereka akan menyenangkan dan itu dapat dengan mudah ditambahkan dengan membungkus tombol-tombol dalam tampilan di sini, kedua tombol sebenarnya.
Jadi saya akan melakukan ini di sini dan sekarang memberikan setiap tampilan gaya di sini, mungkin gaya wadah tombol, lakukan ini pada tampilan pertama dan pada tampilan kedua
dan sekarang kita bisa memberikan wadah
tombol itu styling di sana di stylesheet dan di sini kita dapat mengatur
margin atas misalnya 10 untuk memastikan bahwa setiap tombol memiliki margin kecil ke atas sehingga tombol tidak
duduk langsung di samping satu sama lain yang saya pikir akan sangat membantu
tombol kami.
Jadi ini terlihat bagus
di iOS, mari kita periksa di Android,
ya ini tidak terlihat terlalu buruk.
Jadi dengan itu, kita memiliki pengaturan dasar itu, sekarang mari kita pastikan bahwa ini juga melakukan sesuatu yang bermanfaat
dan kita benar-benar mencoba masuk dengan itu.