9 Ekim 2020

React-Native 9 – Header Component

ile Turan Yunus

Artık uygulamamıza güzel bir header componenti yakışır bence onun için kolları sıvıyoruz. İlk olarak hemen hemen her projemde kullandığım native-base paketini projemize ekliyoruz.

‘npm install native-base’

Daha sonra src/components altında Header.js diye bir dosya ekliyoruz. Ama ilk önce header componentini kullanacağımız home componenti içinde bir kaç değişiklik yapıyoruz. Props’dan türeyen navigation’ı tanımlıyoruz ve bunu alt componentlere referans olarak vereceğiz.


Aşağıda değişiklik yaptıgım Home.js componentini paylaşıyorum.

Home.js

Home componenti içinden Header componentine 2 tane parametre geçiyorum. Header component’i tamamen dinamik gözükmesi sebebiyle

Header componenti içinde ise Home component’den aldığım parametreleri props ile alıp tanımlamalarımı yapıyorum. Sol üstte gözüken menü ikonuna tıkladığınızda yandan menünün açılacağını göreceksiniz.


Aşağıda yeni eklediğim Header.js componentini paylaşıyorum.

HeaderComponent.js

İşte Bu kadar 🙂 Yukarı daki işlemleri yaptıgınızda ekranınız tamamen aşagıdaki gibi gözükmektedi.

Simülatör

Teşekkürler ilginiz için,

Sürç-i Lisan ettiysek.

Affola