Jadi dengan itu, mari kita mulai dengan aplikasi kita di sini dan ada berbagai cara untuk memulai tentu
saja,
saya ingin memulai dengan pertama-tama menjatuhkan gaya wadah ini di sini di layar awal saya dan sebagai gantinya, saya ingin menyingkirkan teks
dan semuanya di sini dan saya ingin memulai dengan menambahkan tajuk saya sendiri,
jadi bilah ini di bagian atas layar.
Sekarang kita dapat membuat bilah seperti itu sendiri di sini, biarkan saya menyingkirkan impor yang tidak kita
perlukan dan saya akan membuatnya bukan di dalam komponen aplikasi ini tetapi di file komponen
terpisah, dalam komponen khusus yang terpisah karena dan itu sudah satu hal super penting untuk diambil, seperti dalam
Bereaksi untuk
aplikasi web, itu adalah praktik yang baik untuk membagi aplikasi Anda menjadi beberapa komponen yang kemudian Anda susun bersama karena itu
mengarah pada kode yang lebih mudah dikelola dan dapat digunakan kembali.
Jadi saya akan menambahkan folder baru, komponen, nama terserah Anda, Anda dapat memberi nama folder itu apa pun yang Anda
inginkan dan di sana saya ingin memiliki header. File js untuk memegang komponen header.
Di sana, kita perlu mengimpor Bereaksi dari Bereaksi sehingga kita dapat menggunakan Bereaksi
di sana dan menulis kode jsx dan kemudian kita juga akan memerlukan beberapa komponen dari Bereaksi Asli karena Anda tidak boleh lupa bahwa
ini adalah satu-satunya komponen inti yang dapat Anda gunakan di akhir.
Anda tidak dapat menggunakan elemen HTML web apa pun atau semacamnya,
Anda membutuhkan primitif inti ini React Native memberi Anda.
Jadi kita pasti membutuhkan tampilan di sini dan juga komponen teks dan juga komponen stylesheet dan sekarang
dengan itu, kita bisa mulai membangun header kita.
Jadi untuk ini, saya akan menambahkan konstanta tajuk yang memegang komponen fungsional saya karena saya akan bekerja dengan komponen fungsional hanya dalam
kursus ini, kita akan menggunakan kait di tempat-tempat di mana kita perlu mengelola efek negara atau efek
samping dan di sini, kita akan tentu saja mengekspor komponen ini pada akhirnya dan juga mengatur objek gaya dengan
style sheet buat sehingga kita bisa gaya ini pada akhirnya.
Sekarang mari kita buat komponen kita di sini, mari
kita kembalikan sesuatu di sini dan
apa yang ingin saya kembalikan adalah pada akhirnya tampilan dengan teks di dalamnya dan teks harus
menjadi judul kita.
Jadi oleh karena itu antara tag pembuka dan penutup di sini, saya akan menampilkan judul alat peraga sehingga komponen kita
sendiri dapat menerima judul prop dan menampilkan ini di sini. Dan tampilan di sekitar teks akan digunakan untuk
memposisikan teks dan untuk memberikan gaya ini, jadi untuk menata tajuk kami karena elemen teks sendiri juga
bergaya tetapi tidak pada tingkat yang sama seperti tampilan, tampilan benar-benar sedikit lebih fleksibel mengenai gaya yang dapat
Anda tetapkan dan tentang bagaimana perilakunya dan oleh karena itu, Anda selalu
ingin menggunakan tampilan untuk wadah di sekitarnya dan untuk penataan keseluruhan ini yang mungkin dimiliki komponen
Anda atau bagian dari komponen Anda.
Jadi di sini, saya akan menambahkan prop gaya dan menetapkan gaya untuk objek gaya saya, gaya yang belum kita buat di sana
tapi saya akan beri nama header dan saya juga akan memberikan teks gaya prop dan menunjuk ke judul gaya header atau apa pun yang Anda ingin nama itu
karena seperti yang saya katakan, Anda dapat gaya teks juga dan di sini saya ingin memiliki
beberapa gaya teks tertentu nanti juga memastikan bahwa teks terlihat bagus. Jadi sekarang di sini di stylesheet, kita bisa mulai menata
header kita dan saya akan mulai dengan header itu sendiri, dengan menambahkan prop header dan kemudian objek ini akan
menyimpan definisi gaya ini untuk header, jadi untuk komponen tampilan ini di sana-sini tentu saja, Anda
bebas bereksperimen dengan apa pun yang Anda inginkan. Saya akan pergi dengan lebar 100% sehingga
dibutuhkan lebar perangkat penuh yang bisa kita dapatkan atau lebar penuh dari komponen induk menjadi tepat, tetapi saya
akan menambahkannya sehingga komponen induk mengambil lebar perangkat penuh dan oleh karena itu ,
ini juga akan mengambil lebar perangkat penuh pada akhirnya. Tetapkan ketinggian dan di sana, Anda dapat bereksperimen dengan
nilai yang berbeda, saya menemukan 90 terlihat cukup baik dan karena itu saya akan pergi dengan itu.
Catatan tambahan, untuk saat ini saya akan mengoptimalkan untuk layar-layar ini yang saya miliki di sini, dalam
modul kursus berikutnya, kita akan membahas bagaimana Anda dapat menyesuaikan tampilan dan kode Anda untuk perangkat yang berbeda, baik
mengenai ukurannya maupun mengenai platform kode Anda sedang berjalan. Untuk saat ini, kami tidak akan memiliki perbedaan di sana,
kami akan menyesuaikan juga di aplikasi kami agar terlihat bagus pada dua emulator ini, tetapi sekali lagi, saya akan membahasnya nanti.
Jadi ketinggian 90, padding ke atas 36 untuk memiliki beberapa jarak ke atas dan saya perlu menambahkan ini pada
dasarnya mengatasi atau hal-hal seperti status bar di sini atau kedudukan ini di sini, jadi karena
itu saya menambahkan top padding ini dan saya juga ingin untuk menambahkan warna latar belakang di
sini dan sekarang Anda tentu saja benar-benar bebas untuk
memilih warna yang Anda inginkan, saya menyiapkan warna yang bagus, kode hex warna yang saya pribadi suka dan itu adalah
# f7287b yang merupakan warna yang cukup bagus di saya pendapat seperti yang akan Anda lihat dalam sedetik.
Sekarang saya juga ingin memusatkan judul dan karena itu, saya akan menggunakan item pelurusan
dan justifyContent karena setiap tampilan secara default menggunakan flexbox dan oleh karena itu dengan menyelaraskan
item dan justifyContent, kita dapat mengontrol bagaimana elemen anak dari tampilan diposisikan di dalam tampilan. dan
dengan pusat
untuk menyelaraskan item dan justifyContent juga diatur ke pusat, kami memusatkan semua anak atau elemen anak di dalam tampilan
di tengah, baik secara horizontal maupun vertikal.
Sekarang untuk judul tajuk,
saya juga ingin mengatur beberapa gaya untuk ini.
Jadi judul tajuk di sini, yang seharusnya mendapatkan warna hitam karena itu akan cocok dengan warna ini di sini dan agar kita dapat
membaca teks dan saya ingin mengatur ukuran font menjadi 18 katakanlah, sehingga kita memperbaikinya,
sedikit ukuran font yang lebih besar di sini. Dengan itu, mari kita coba gunakan tajuk ini dan
mari kita gunakan di aplikasi. File js di sini. Di sana, kami memiliki
tampilan ini dan tampilan ini tidak memiliki gaya.
Saya akan mengubah ini dan mengatur tampilan layar di sini dan memberikannya satu atribut.
Sekarang kita dapat menetapkan ini di sini dan melenturkan satu akan memastikan bahwa tampilan ini mengambil semua
ruang yang bisa didapat dan karena itu adalah tampilan root aplikasi kita, itu berarti akan mengambil
semua lebar dan tinggi yang bisa didapat, itu akan menempati penuh layar dan karena itu karena tajuk saya mengambil lebar
100%, karena saya akan menambahkannya langsung di dalam tampilan ini yang sekarang dikonfigurasi untuk mengambil lebar dan tinggi penuh, tajuk
ini juga akan mengambil lebar penuh.
Jadi sekarang kita hanya perlu menambahkan header
di sini, jadi impor header dari. / komponen / header, Anda
dapat menghilangkan ekstensi file dan kemudian hanya menambahkan header sebagai tag penutup diri di sini tapi jangan lupa untuk mengatur
prop judul karena ingat bahwa kami mengeluarkan prop judul di sini di antara
tag teks, jadi kami dapat menambahkan judul di sini dan saya akan menyebutkannya menebak angka karena itulah tujuan permainan kami.
Sekarang jika kita menyimpan ini, itu akan secara otomatis membangun kembali dan Anda akan melihat header yang terlihat seperti ini di iPhone dan seperti ini
di sini di Android dan saya akan mengatakan tidak apa-apa untuk kedua perangkat. Sekali lagi, nanti kita akan mencari cara
bagaimana Anda dapat menyempurnakan tampilan ke perangkat spesifik yang sedang dijalankan aplikasi Anda.