Jadi di layar tempat baru, saya ingin dapat menambahkan tempat dan untuk itu, saya pertama-tama
akan menambahkan komponen input teks yang tentu saja tidak ada hubungannya dengan fitur perangkat asli tetapi kami
juga membutuhkannya karena di di sana, kita sekarang dapat menambahkan input teks yang memungkinkan pengguna untuk memasukkan judul dan karena itu, saya juga
akan menambahkan komponen teks di sini di mana saya mengatakan judul, yang seharusnya bertindak sebagai label
untuk input teks
ini di sini dan secara keseluruhan, saya juga ingin tampilan gulir di sini untuk membungkus semua konten saya karena saya tidak tahu perangkat
mana yang akan digunakan pengguna tetapi kami akan menambahkan lebih dari sekedar judul, kami juga akan
menambahkan pemilih gambar dan pemilih tempat di seluruh modul ini dan karenanya dapat menggulir halaman ini sangat penting.
Jadi sekarang kita memiliki label judul dan input teks miliknya yang untuk saat ini tidak akan melakukan apa
pun tetapi yang akan segera memungkinkan pengguna untuk memasukkan judul.
Saya juga ingin memastikan bahwa tentu saja formulir ini dapat dikirimkan, jadi
yang juga ingin saya lakukan adalah saya ingin menambahkan komponen tombol di sini dan setelah input teks di sini, saya akan memiliki tombol saya di
mana saya katakan simpan tempat untuk contoh, tambahkan warna di sini dan atur ini ke Colors. utama dan untuk itu, Anda perlu memastikan Anda mengimpor warna
konstan di sini dan onPress nantinya akan mengirimkan formulir ini, untuk saat
ini saya tidak melakukan apa pun di sini.
Input teks tentu saja juga dapat dikonfigurasi, meskipun sebagian besar konfigurasi dasar baik-baik saja di sini, saya
tidak perlu mengubah jenis keyboard dan sebagainya, tetapi beberapa gaya akan bagus dan itu sebenarnya
berlaku untuk seluruh halaman.
Jadi untuk tampilan ini di sini, misalnya, saya ingin menambahkan gaya formulir di sini, jadi pengidentifikasi gaya formulir sehingga
saya bisa menata keseluruhan bentuk. Untuk judul di
sini, saya akan menambahkan gaya label dan untuk input teks, saya juga ingin menambahkan gaya saya sendiri dan saya akan menggunakan
input teks pengidentifikasi di sini. Dengan itu mari kita pergi ke
stylesheet dan pastikan kita menambahkan beberapa style di sini. Untuk keseluruhan bentuk, saya akan
menambahkan margin di semua arah 30 sehingga tidak duduk langsung di tepi layar.
Untuk label,
saya ingin mengatur ukuran font katakanlah 18 dan juga menambahkan margin ke bagian bawah 15 sehingga kami memiliki beberapa
jarak antara label dan input teks dan pada input teks itu sendiri,
baik untuk menjadi dapat melihatnya, saya akan menambahkan batas bawah dan mengatur warnanya ke abu-abu terang
ini di sini dengan kode hex #ccc dan lebar bawah perbatasan di sini dari 1 dan kemudian juga memiliki margin di
bagian bawahnya, sehingga untuk konten di bawahnya, tombol sekarang dari 15 dan apa yang juga akan
saya tambahkan di sini adalah sedikit padding vertikal, hanya empat dan sedikit
padding horizontal, hanya dua. Jika saya menyimpannya, mari kita lihat.
Jika saya pergi ke layar tempat baru, ini adalah apa yang saya miliki dan ini tidak terlihat terlalu
buruk, juga di Android, ini adalah sesuatu yang dapat kami kerjakan, saya kira dan ini adalah sesuatu yang dapat kami bangun.
Sekarang tentu saja, input ini tidak melakukan
apa-apa, saya tentu saja ingin menangkap apa yang dimasukkan pengguna dan untuk menjaga ini tetap sederhana, di sini saya tidak akan
menambahkan validasi super kompleks atau semacamnya,
alih-alih saya hanya akan menangkap nilainya dan hanya itu. Anda tentu saja dapat menambahkan validasi, Anda dapat menambahkan reducer
seperti yang
kami lakukan di modul input pengguna di mana Anda belajar bagaimana Anda dapat mengelola formulir yang
lebih kompleks dengan segala cara, di sini sekali lagi saya akan membuat ini sangat sederhana dan karena itu, saya hanya akan mengimpor status penggunaan
hook dari Bereaksi di sini sehingga saya bisa menangkap nilai saya di sini.
Jadi di sini, saya akan memiliki nilai judul dan mengatur fungsi nilai judul dan menggunakan status penggunaan untuk menginisialisasi ini ke string kosong
dan kemudian saya akan menambahkan fungsi di sini, pengendali perubahan
judul, yang menerima teks yang dimasukkan pengguna dan di mana l Maka saya hanya akan mengatur nilai judul
saya untuk teks itu dan di sini tentu saja, Anda dapat menambahkan validasi tetapi sekali lagi untuk menjaga ini tetap sederhana, saya tidak akan
melakukannya.
Penangan perubahan judul yang sekarang harus terikat pada prop teks perubahan di sini, pada input teks, jadi di sana
saya akan
menunjuk pada penangan perubahan judul dan saya akan mengikat nilai input itu tentu saja ke nilai judul saya karena di situlah
saya menyimpan input pengguna dan dengan itu kami memiliki
input pengguna yang berfungsi penuh di sini di mana saya juga menangkap nilainya. Sekarang dengan itu, kami bisa mendapatkan judul,
kami juga memiliki tempat
yang aman.
Setiap kali kita menekan tombol ini, saya
ingin menyimpannya sehingga saya akan memiliki tempat penangan simpanan saya yang merupakan fungsi yang ingin saya ikat ke
tombol simpan tempat
ini, jadi di sini alih-alih memiliki fungsi anonim kosong ini, saya akan arahkan ke save place handler pada tombol
save place ini dan di sana, saya sekarang ingin memastikan tempat ini bisa diselamatkan
dan untuk ini, saya akan menggunakan Redux lagi.
Jadi saya akan menginstal Redux dengan menginstal npm --simpan redux dan juga Bereaksi Redux dan saya juga akan menginstal Redux
Thunk sehingga kita dapat menggunakannya juga.
Untuk saat ini saya tidak memerlukannya karena saya tidak berbicara dengan server tetapi kemudian setelah kami menambahkan
fitur perangkat asli, Anda akan melihat bahwa di sana kami juga mendapatkan beberapa fitur yang tidak
sinkron dan di mana kami mungkin ingin menunggu penyelesaiannya sebelum kami benar-benar mengirim tindakan yang persis di
mana Redux Thunk dapat membantu kami. Jadi oleh karena itu dengan tiga paket yang diinstal ini, kita sekarang dapat mengatur Redux.