React Native'in ortamını ayarlamak için yüklemeniz gereken birkaç şey vardır. OSX'i bina platformumuz olarak kullanacağız.
C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative
Yukarıdaki komutu yürüttükten sonra, aşağıdaki içeriklerle name belirtir içeren bir klasör oluşturulur.
Her şey yolunda giderse, aşağıda gösterildiği gibi bir QR kodu alacaksınız.
Talimat verildiği gibi, android tasarımınızda react yerel uygulamalarını çalıştırmanın bir yolu expo kullanmaktır. Expo istemcisini androidinize yükleyin ve yukarıda elde edilen QR kodunu tarayın.
Ardından, eject komutunu çalıştır komutunu şu şekilde yürütün:
Bu, çıkarma seçeneklerinizi sorar, okları kullanarak ilkini seçin ve enter tuşuna basın.
Ardından, ana ekranda uygulamanın adını ve Android stüdyosunun ve Xcode projelerinin proje adını önermelisiniz.
Projeniz başarıyla kaldırılmış olsa da, −
Bu hatayı yok sayın ve aşağıdaki komutu kullanarak android için react native komutunu çalıştırın −
Ancak, bundan önce android studio'yu yüklemeniz gerekir.
Kurulum dosyasını indirdikten sonra, üzerine çift tıklayın ve kuruluma devam edin.
İleri düğmesine tıkladığınızda bir Sistem Görüntüsü penceresi göreceksiniz. x86 Görüntüler sekmesini seçin.
Ardından, Marshmallow'u seçin ve İleri'ye tıklayın.
Son olarak, AVD yapılandırmasını bitirmek için Son düğmesine tıklayın.
Sanal cihazınızı yapılandırdıktan sonra, android emülatörünüzü başlatmak için İşlemler sütununun altındaki oynat düğmesine tıklayın.
Ardından, uygulamanızın yürütülmesi, durumunu görebileceğiniz başka bir bilgi isteminde başlar.
Android emülatörde, varsayılan uygulamanın yürütülmesini şu şekilde görebilirsiniz:
burada, Tutorialspoint'i kullanıcı adınızla değiştirin.
Değilse, android emülatörüne tıklayın ctrl + m tuşlarına basın, ardından Sıcak Yeniden Yüklemeyi Etkinleştir seçeneğini seçin.
| Sr.No. | Yazılım | Tarif |
|---|---|---|
| 1 | NodeJS ve NPM |
Bu bağlantıyı görüntüleyebilmek için kayıt olmalı zaten üyeyseniz üye girişi yapmalısınız.
öğreticimizi takip edebilirsiniz. |
1. Adım: create-react-native-app'i 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 küresel olarak).
Kod:
C:\Users\Tutorialspoint> npm install -g create-react-native-appAdım 2: Proje oluşturma
Gerekli klasöre göz atın ve aşağıda gösterildiği gibi yeni bir react native projesi oluşturun.C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative
Yukarıdaki komutu yürüttükten sonra, aşağıdaki içeriklerle name belirtir içeren bir klasör oluşturulur.
Adım 3: NodeJS Python Jdk8
Sisteminizde Python NodeJS ve jdk8 yüklü olduğundan emin olun, değilse, bunları yükleyin. Bunlara ek olarak, belirli sorunları önlemek için ipliğin en son sürümünü kurmanız önerilir.Adım 4: React Native CLI'yı 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'ye yükleyebilirsiniz.
Kod:
npm install -g react-native-cli5. Adım: Yerel tepki vermeye başlayın
Yüklemeyi doğrulamak için proje klasörüne göz atın ve start komutunu kullanarak projeyi başlatmayı deneyin.
Kod:
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.
Talimat verildiği gibi, android tasarımınızda react yerel uygulamalarını çalıştırmanın bir yolu expo kullanmaktır. Expo istemcisini androidinize yükleyin ve yukarıda elde edilen QR kodunu tarayın.
Adım 6: Projeyi çıkarma
Android studio'yu kullanarak android emülatörü çalıştırmak istiyorsanız, ctrl + c tuşlarına basarak geçerli komut satırından çıkın.Ardından, eject komutunu çalıştır komutunu şu şekilde yürütün:
Kod:
npm run ejectBu, çıkarma seçeneklerinizi sorar, okları kullanarak ilkini seçin ve enter tuşuna basın.
Ardından, ana ekranda uygulamanın adını ve Android stüdyosunun ve Xcode projelerinin proje adını önermelisiniz.
Projeniz başarıyla kaldırılmış olsa da, −
Bu hatayı yok sayın ve aşağıdaki komutu kullanarak android için react native komutunu çalıştırın −
Kod:
react-native run-androidAncak, bundan önce android studio'yu yüklemeniz gerekir.
7. Adım: Android Studio'yu yükleme
Bu bağlantıyı görüntüleyebilmek için kayıt olmalı zaten üyeyseniz üye girişi yapmalısınız.
web sayfasını ziyaret edin ve android studio'yu indirin.
Kurulum dosyasını indirdikten sonra, üzerine çift tıklayın ve kuruluma devam edin.
Adım 8: AVD Yöneticisi'ni Yapılandırma
AVD Yöneticisi'ni yapılandırmak için menü çubuğundaki ilgili simgeye tıklayın.
Adım 9: AVD Yöneticisi'ni Yapılandırma
Bir cihaz tanımı seçin, Nexus 5X önerilebilir.
İleri düğmesine tıkladığınızda bir Sistem Görüntüsü penceresi göreceksiniz. x86 Görüntüler sekmesini seçin.
Ardından, Marshmallow'u seçin ve İleri'ye tıklayın.
Son olarak, AVD yapılandırmasını bitirmek için Son düğmesine tıklayın.
Sanal cihazınızı yapılandırdıktan sonra, android emülatörünüzü başlatmak için İşlemler sütununun altındaki oynat düğmesine tıklayın.
10. Adım: Android'i çalıştırma
Komut istemini açın, proje klasörünüze göz atın ve react-native run-android komutunu yürütün.
Ardından, uygulamanızın yürütülmesi, durumunu görebileceğiniz başka bir bilgi isteminde başlar.
Android emülatörde, varsayılan uygulamanın yürütülmesini şu şekilde görebilirsiniz:
Step 11: local.properties
Proje klasörünüzdeki android klasörünü açın SampleReactNative/android (bu durumda). local.properties adlı bir dosya oluşturun ve içine aşağıdaki yolu ekleyin.
Kod:
sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdkburada, Tutorialspoint'i kullanıcı adınızla değiştirin.
12. Adım: Sıcak Yeniden Yükleme
Ve uygulama oluşturmak için App değiştirin.js ve değişiklikler android emülatöründe otomatik olarak güncellenecektir.Değilse, android emülatörüne tıklayın ctrl + m tuşlarına basın, ardından Sıcak Yeniden Yüklemeyi Etkinleştir seçeneğini seçin.