React Native - Ortam Kurulumu
React Native ortamını kurmak için yüklemeniz gereken birkaç şey var. OSX'i bina platformumuz olarak kullanacağız.
| Sr.No. | Yazılım | Açıklama |
|---|---|---|
| 1 | NodeJS ve NPM | NodeJS'yi yüklemek için NodeJS Ortamı Kurulum öğreticimizi takip edebilirsiniz . |
1. Adım: create-react-native-app yükleyin
NodeJS ve NPM'yi sisteminize başarıyla yükledikten sonra, create-react-native-app kurulumuna devam edebilirsiniz (aşağıda gösterildiği gibi global olarak).
C:\Users\Tutorialspoint> npm install -g create-react-native-app2. Adım: Proje oluşturun
Gerekli klasöre göz atın ve aşağıda gösterildiği gibi yeni bir react yerel projesi oluşturun.
C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNativeYukarıdaki komutu uyguladıktan sonra, aşağıdaki içeriklerle adı belirtilen bir klasör oluşturulur.
3. Adım: NodeJS Python Jdk8
Sisteminizde Python NodeJS ve jdk8'in kurulu olmadığından emin olun, bunları kurun. Bunlara ek olarak, belirli sorunlardan kaçınmak için ipliğin en son versiyonunun kurulması tavsiye edilir.
4. Adım: React Native CLI'yi yükleyin
Aşağıda gösterildiği gibi install -g react-native-cli komutunu kullanarak react native komut satırı arayüzünü npm'de yükleyebilirsiniz.
npm install -g react-native-cli
5. Adım: Yerel tepki vermeye başlayın
Kurulumu doğrulamak için proje klasörüne göz atın ve start komutunu kullanarak projeyi başlatmayı deneyin.
C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm startHer şey yolunda giderse, aşağıda gösterildiği gibi bir QR kodu alacaksınız.
Talimatlarda belirtildiği gibi, android cihazınızda react yerel uygulamalarını çalıştırmanın bir yolu expo kullanmaktır. Expo istemcisini android cihazınıza kurun ve yukarıda elde edilen QR kodunu tarayın.
Adım 6: Projeyi çıkarın
Android stüdyosunu kullanarak android emülatörü çalıştırmak istiyorsanız, mevcut komut satırından çıkın. ctrl+c.
Ardından, çalıştırmayı yürütün eject command gibi
npm run ejectBu, çıkarmanız için seçenekler sorar, okları kullanarak ilkini seçin ve enter tuşuna basın.
Ardından, ana ekranda uygulamanın adını ve Android stüdyosu ve Xcode projelerinin proje adını önermelisiniz.
Projeniz başarıyla çıkarılmasına rağmen, şu şekilde bir hata alabilirsiniz -
Bu hatayı yok sayın ve aşağıdaki komutu kullanarak android için react native'i çalıştırın -
react-native run-androidAncak bundan önce android stüdyosunu kurmanız gerekiyor.
7. Adım: Android Studio'yu Kurma
Web sayfasını ziyaret edin https://developer.android.com/studio/ ve android stüdyosunu indirin.
Kurulum dosyasını indirdikten sonra üzerine çift tıklayın ve kuruluma devam edin.
Adım 8: AVD Manager'ı Yapılandırma
AVD Yöneticisini yapılandırmak için menü çubuğundaki ilgili simgeye tıklayın.
Adım 9: AVD Manager'ı Yapılandırma
Bir cihaz tanımı seçin, Nexus 5X önerilir.
İleri düğmesine tıklayın, bir Sistem Görüntüsü penceresi göreceksiniz. Seçinx86 Images sekmesi.
Ardından, Marshmallow'u seçin ve ileriye tıklayın.
Son olarak, AVD yapılandırmasını bitirmek için Bitir düğmesine tıklayın.
Sanal cihazınızı yapılandırdıktan sonra, android emülatörünüzü başlatmak için Eylemler sütununun altındaki oynat düğmesine tıklayın.
Adım 10: Android'i çalıştırma
Komut istemini açın, proje klasörünüze göz atın ve react-native run-android komut.
Ardından, uygulamanızın durumunu görebileceğiniz başka bir istemde uygulamanızın yürütülmesi başlar.
Android emülatörünüzde varsayılan uygulamanın çalışmasını şu şekilde görebilirsiniz:
11. Adım: local.properties
Aç android proje klasörünüzdeki klasör SampleReactNative/android(bu durumda). Adlı bir dosya oluşturunlocal.properties ve aşağıdaki yolu içine ekleyin.
sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdkburada değiştir Tutorialspoint kullanıcı adınızla.
Adım 12: Çalışırken Yeniden Yükleme
Uygulama oluşturmak için App.js'yi değiştirin ve değişiklikler android öykünücüsünde otomatik olarak güncellenecektir.
Değilse, android öykünücüsüne basın ctrl+m sonra seçin Enable Hot Reloading seçeneği.
