React Native'de İlk Projenizi Nasıl Oluşturabilirsiniz?

React, bugün vahşi doğada en popüler JavaScript kitaplıklarından biridir ve bunun iyi bir nedeni vardır. Facebook gibi bir devin desteğiyle, karşılaştığı ilk şüphecilikle bile, çabalar çok ileri gidecekti.

React kullanımı zamanla hızla arttı ve React Native bir sonraki yinelemesi. React Native, geliştiricilerin iOS ve Android cihazlarda yerel olarak çalışan React uygulamaları oluşturmasına olanak sağlamayı amaçlar.

Bu gönderiyle, React ile ilgili bazı temel bilgileri ve React Native'de yapılandırma ve stil oluşturmaya nasıl başlayacağımı anlatacağım.

Temel Javascript, HTML ve React becerileri dışında herhangi bir ön koşul yoktur. JavaScript'te "kapatmaların" ne olduğunu ve "bunun" nasıl çalıştığını bilmek yardımcı olacaktır, ancak ne olursa olsun React Native'i öğreneceksiniz.

Parmaklarınızı ısıtın ve klavyenizi bu eğlenceli sürüşe hazırlayın!

Başlarken

React Native'e aşina olmayanlar için, belgelerde React'i kullanmaya başlamanıza yardımcı olacak mükemmel bir Başlarken sayfası vardır.

Şimdi, create-react-native-app (sitenizde React Native kurulumu için resmi başlangıç ​​sayfası) ile temel bir React projesi oluşturalım.

Kurulum adımlarını başarıyla tamamladıktan sonra proje dizinine bir göz atın:

React Native ile ilgili harika bir şey, hem Android hem de iOS uygulamalarını aralarında paylaşılan JavaScript kodunun çoğunluğuyla birlikte yazabilmenizdir. Yeni oluşturulan klasörün içinde iki dosya bulacaksınız: “ index.android.js” ve “ index.ios.js”. Bir iOS uygulaması oluşturuyorsanız, index.ios.js ile, bir Android uygulaması için ise index.android.js ile çalışacaksınız.

Bir iOS uygulaması oluşturduğumuza göre, sırf bu öğretici uğruna ve her şeyi temiz tutmak için “index.android.js” dosyasından ve android klasöründen tamamen kurtulalım.

Uygulama başladığında çalışan ilk dosya “index.ios.js”dir. İos klasörüne gidin ve içindeki xcode projesini açın. Ardından projenizi xcode öykünücüsünde çalıştırmak için çalıştır düğmesine basın.

Presto! Kendi React Native uygulamanız kilitlenip yüklenmiş olarak iPhone öykünücünüz şimdi çalışır durumda!

Tamamlandığında, öykünücüde aşağıdaki çıktıyı görmelisiniz:

Bu eğitim için iPhone 6 öykünücüsünü kullanıyorum ve aşağıdaki ilk uygulama açılış ekranının ekran görüntüsü.

Artık IDE'nizde “index.ios.js” dosyasını açabilir ve metni düzenleyerek oynayabilir ve anında değişmesini izleyebilirsiniz.

Bu sayede ilk bölümümüzü tamamlamış olduk.

Son eğitim maketi:

Bu öğretici ile oluşturmak istediğimiz görünümün istenen sonucu budur.

Bu maket aşağıdaki adımlarla elde edilebilir:

Adım 1: Sayfayı kapsayıcılara bölme

İnşa etmek üzere olduğunuz şeyin kaba bir görsel temsiline sahip olmak tavsiye edilen bir uygulamadır. React, konteynerler etrafında inşa edilmiştir; sayfada gördüğünüz her şey bir kapsayıcının parçasıdır. Kodlamaya başlamadan önce, maketi analiz etmek iyi bir fikirdir.

Yukarıdaki şemadan sunum kaplarımızı bulabiliriz:

• Ekran kapsayıcı
  • Oturum açma kapsayıcısı
    • Logo
    • E-posta
    • parola
  • Kayıt kapsayıcı
    • Kayıt düğmesi

Burada, kullanıcı adı ve parola ile /sessions/create isteğini POST yapacak olan _userLogin için bir yönteme de ihtiyacımız olacak.

Bileşenler, yerel React'in kalbi ve ruhudur ve bir gereksinimleri vardır: bileşene ne oluşturulacağını söyleyen bir işlev olan oluşturmayı uygulamalıdırlar. (Dürüst olmak gerekirse başka bir kelime düşünemedim. :D)

index.ios.js dosyasındaki (iOS kullanıcıları için) render yöntemini düzenleyin ve buna göre analiz edilen bölümleri ekleyin.

Stil sınıfını her bölüme aşağıdaki şekilde ekleyin:

 <View style={styles.YourSectionClassName}>

Render yönteminde yapılandırmaya başlamadan önce yapmamız gereken ilk şey bir kurucu eklemektir. Yapıcının içinde durum değişkenlerimizi başlatacağız.

Adım 2: Bileşen sınıfının içindeki yapıcıdaki durumu başlatın

 yapıcı(sahne) {
    süper(sahne);
  
    this.durum = {
    };
  }

Yapıcının altına _onpressButton yöntemini ekleyin

 _onPressButton(){
    konsol.log('giriş basıldı');
  }

Giriş formumuzu TextInputs (girişler) ve TouchableHighlights (tek bir çocuğu tıklanabilir bir öğeye dönüştüren düğme benzeri bileşenler) kullanarak oluşturacağız.

Render işlevinin içindeki yapı aşağıdaki gibi görünmelidir:

Oluşturmada kullanılan tüm bileşenlerin dosyanın üstündeki React Native kitaplığından içe aktarıldığından emin olun. Bu durumda, kütüphaneden aşağıdaki bileşenleri kullanıyorum

• görüş
• Metin
• metin girişi
• DokunulabilirYüksek Işık

Bu modülleri aşağıdaki gibi içe aktarın:

Dizin sayfasının üstüne aşağıdakini ekleyin

 React'i, { Component } 'react'ten içe aktarın;
içe aktarmak {
  AppRegistry, // uygulamayı kaydet
  StyleSheet, // uygulama için stil sayfası bileşeni
  Metin,
  MetinGirdi,
  dokunulabilirVurgu,

} 'react-native'den;

Viewstyle={styles.YourSectionClassName}, bileşeninize tüm özel stilleri ekleyecektir.

Sabit stilleri varsayılan olarak dizin dosyasında bulacaksınız.

 const stilleri = StyleSheet.create({
	...
});

Bölüme stil verirken, her bölümün yüksekliğini, genişliğini ve yerleşimini ve öykünücüde nasıl görüntülendiğini kontrol edebilmemiz için her bölüme kenarlık eklediğinizden emin olun.

 BölümSınıfAdınız:{
	sınır Genişliği:1,
    	borderColor:"SectionBorderColor",

// diğer stilleriniz
...
}

Aşağıdaki, ekranın tüm bölümlerini kenarlıklarla vurgulayan ekran görüntüsüdür:

Bölümlerin stili tamamlandıktan sonra, gerekli olmayan yerlerde kenarlıkları kaldırabiliriz.

Aşağıdaki, oturum açma ekranı bileşeninin son stilidir:

Tüm yapılandırma ve stil tamamlandıktan sonra, aşağıda gösterilen görüntü nihai çıktıdır:

Oturum açma bileşeni için son kod aşağıdadır:

Tebrikler, ilk React Native projenizi oluşturdunuz!

Bu, React Native uygulama geliştirme motorunda bir ekranın nasıl yapılandırılacağının ve stillendirileceğinin basit bir gösterimidir. Biraz uğraşarak, React Native'in geliştiricilerin Android ve iOS cihazlarda neredeyse aynı şekilde çalışan uygulamalar oluşturmasını nasıl sağladığını görebiliriz. Bunu Web için React geliştirme ile birleştirirseniz, son derece rekabetçi, çapraz platformlu, dünyayı değiştirmeye hazır bir paketiniz olur.

React Native ile ilgili eğitimimizi nasıl buldunuz? Aşağıdaki yorum bölümünde bize bildirin!