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-app

2. 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 MyReactNative

Yukarı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 start

Her ş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 eject

Bu, çı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-android

Ancak 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

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\\Sdk

burada 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.