React Native kullanarak Android için geliştirmeye başlama

Bu kılavuz, Android cihazlarda çalışacak platformlar arası bir uygulama oluşturmak için Windows'ta React Native kullanmaya başlamanıza yardımcı olacaktır.

Genel Bakış

React Native, Facebook tarafından oluşturulan bir açık kaynak mobil uygulama çerçevesidir. Yerel kullanıcı arabirimi denetimleri ve yerel platforma tam erişim sağlayan Android, iOS, Web ve UWP (Windows) uygulamaları geliştirmek için kullanılır. React Native ile çalışmak için JavaScript temellerinin anlaşılması gerekir.

Gerekli araçları yükleyerek React Native'i kullanmaya başlama

1. Visual Studio Code'u (veya istediğiniz kod düzenleyicisini) yükleyin.

2. Windows için Android Studio'yu yükleyin ve ANDROID_HOME ortam değişkenini ayarlayın. Ortamınızı Ayarlama - React Native başlığındaki yönergeleri izleyin. Geliştirme işletim sistemi seçimini "Windows" ve Hedef işletim sistemi seçimini Android olarak ayarladığınızdan emin olun.

3. JAVA_HOME ortam değişkenini ayarlayın. Android uygulamaları oluşturmak için kullanılan Gradle aracı, Java SDK'sı için belirli bir sürüm gereksinimi gerektirir. Desteklenen sürümü bulmak için Android Studio'da Ayarlar-Derleme>, Yürütme, Dağıtım-Derleme Araçları-Gradle'a>> gidin. Gradle JDK açılan listesinde seçilen yolu not edin. Aşağıdaki adımları kullanarak JAVA_HOME ortam değişkenini bu yola ayarlayın:

   • Windows arama menüsünde şunu girin: "Sistem ortamı değişkenlerini düzenleyin", bu işlem Sistem Özellikleri penceresini açar.
   • Ortam Değişkenleri... öğesini ve ardından Kullanıcı değişkenleri'nin altında Yeni... öğesini seçin.
   • Değişken adını JAVA_HOME olarak ve değeri Android Studio'dan aldığınız yol olarak ayarlayın.

4. Windows için NodeJS'yi yükleme NodeJS'nin birden çok projesi ve sürümüyle çalışacaksanız Windows için Node Version Manager (nvm) kullanmayı düşünebilirsiniz. Yeni projeler için en son LTS sürümünü yüklemenizi öneririz.

Uyarı

Ayrıca, tercih ettiğiniz komut satırı arabirimi (CLI) ile çalışmak için Windows Terminal yükleyip kullanmayı ve sürüm denetimi için de Git'idüşünmeyi isteyebilirsiniz. Java JDK, Android Studio v2.2+ ile birlikte sunulur, ancak JDK'nizi Android Studio'dan ayrı olarak güncelleştirmeniz gerekiyorsa Windows x64 Yükleyicisi'ni kullanın.

React Native ile yeni proje oluşturma

1. Yeni bir React Native projesi oluşturmak için npm ile yüklenen paket çalıştırıcı aracı npx'i kullanın. VS Code'deki tümleşik terminalden (Görüntüle Tümleşik Terminali) veya Windows Komut İstemi, PowerShell ya da >'nden.

   npx react-native init MyReactNativeApp
   

   Belirli bir React Native sürümüyle yeni bir proje başlatmak istiyorsanız bağımsız değişkenini --version kullanabilirsiniz. React Native sürümleri hakkında bilgi için bkz. Sürümler - React Native.

   npx react-native@X.XX.X init  <projectName> --version X.XX.X
   

2. Yeni "MyReactNativeApp" dizininizi açın:

   cd MyReactNativeApp
   

3. Projenizi bir donanım Android cihazında çalıştırmak istiyorsanız, cihazı bir USB kablosuyla bilgisayarınıza bağlayın.

4. Android öykünücüsünde projenizi çalıştırmak istiyorsanız, Android Studio varsayılan bir öykünücü ile birlikte yüklendiğinden herhangi bir işlem yapmanıza gerek yok. Uygulamanızı belirli bir cihaz için öykünücüde çalıştırmak istiyorsanız. Araç çubuğundaki AVD Yöneticisi düğmesine tıklayın.

   .

5. Projenizi çalıştırmak için aşağıdaki komutu girin. Bu, Node Metro Bundler'ı görüntüleyen yeni bir konsol penceresi açar.

   npx react-native run-android
   

   

   

   Uyarı

   Android Studio'nun yeni bir yüklemesini kullanıyorsanız ve henüz başka bir Android geliştirmesi yapmadıysanız, uygulamayı çalıştırdığınızda Android SDK'sının lisanslarını kabul etmeyle ilgili hatalarla karşılaşabilirsiniz. "Uyarı: Android SDK Platform 29 paketi lisansı kabul edilmedi" gibi. Bu sorunu çözmek için, Android Studio'da SDK Yöneticisi düğmesine tıklayabilirsiniz . İsterseniz aşağıdaki komutla lisansları listeleyebilir ve kabul edebilir ve makinenizdeki SDK konumunun yolunu kullandığınızdan emin olabilirsiniz.

   C:\Users\[User Name]\AppData\Local\Android\Sdk\tools\bin\sdkmanager --licenses
   

6. Uygulamayı değiştirmek için proje dizinini MyReactNativeApp istediğiniz IDE'de açın. VS Code veya Android Studio'yu öneririz.

7. tarafından react-native init oluşturulan proje şablonu adlı App.jsbir ana sayfa kullanır. Bu sayfa, React Native geliştirmesi hakkındaki bilgilere yönelik birçok yararlı bağlantıyla önceden doldurulmuş. İlk Text öğesine aşağıda gösterilen "HELLO WORLD!" dizesi gibi bir metin ekleyin.

   <Text style={styles.sectionDescription}>
     Edit <Text style={styles.highlight}>App.js</Text> to change this
     screen and then come back to see your edits. HELLO WORLD!
   </Text>
   

8. Yaptığınız değişiklikleri göstermek için uygulamayı yeniden yükleyin. Bunu yapmanın birkaç yolu vardır.

   • Metro Bundler konsol penceresinde "r" yazın.
   • Android cihaz öykünücüsunda klavyenizde "r" seçeneğine iki kez dokunun.
   • Donanım android cihazında React Native hata ayıklama menüsünü açmak için cihazı sallayın ve 'Yeniden Yükle'yi seçin.