Masaüstü için React Native ile masaüstü uygulaması oluşturmaya başlama

2025-05-03

Masaüstü için React Native , React kullanarak bir Evrensel Windows Platformu (UWP) uygulaması oluşturmanıza olanak tanır.

React Native'e 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.

React hakkında daha fazla genel bilgi için React'e genel bakış sayfasına bakın.

Önkoşullar

Masaüstü için React Native'i kullanmaya yönelik kurulum gereksinimleri Sistem Gereksinimleri sayfasında bulunabilir. Windows Ayarlar Uygulamasında Geliştirici Modu'nu AÇIN.

Masaüstü için React Native'i yükleme

Bu adımları izleyerek Masaüstü için React Native kullanarak bir Windows masaüstü uygulaması oluşturabilirsiniz.

Bir komut satırı penceresi (terminal) açın ve Windows masaüstü uygulama projenizi oluşturmak istediğiniz dizine gidin.
Bu komutu Düğüm Paketi Yürütücüsü (NPX) ile kullanarak yerel olarak veya genel olarak ek araçlar yüklemenize gerek kalmadan React Native projesi oluşturabilirsiniz. komutu tarafından <projectName>belirtilen dizinde bir React Native uygulaması oluşturur.
```
npx react-native init <projectName>
```
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
```
Proje dizinine geçin ve Masaüstü için React Native paketlerini yüklemek için aşağıdaki komutu çalıştırın:
```
cd projectName
npx react-native-windows-init --overwrite
```
Uygulamayı çalıştırmak için önce web tarayıcınızı (yani. Microsoft Edge), ardından aşağıdaki komutu yürütür:
```
npx react-native run-windows
```

Visual Studio kullanarak React Native masaüstü uygulamanızda hata ayıklama

Visual Studio 2022'yi aşağıdaki seçenekler işaretli olarak yükleyin:
- İş yükleri: C++ ile Evrensel Windows Platformu geliştirme ve Masaüstü geliştirme.
- Bireysel Bileşenler: Geliştirme etkinlikleri ve Node.js geliştirme desteği.
Çözüm dosyasını Visual Studio'daki uygulama klasöründe açın (örneğin, AwesomeProject/windows/AwesomeProject.sln projectName< olarak >AwesomeProject kullandıysanız).
Çalıştır düğmesinin solundaki ve Ekip ve Araçlar menü öğesinin altındaki combo kutusu denetimlerinden Hata ayıklama yapılandırmasını ve x64 platformunu seçin.
Proje dizininizden komutunu çalıştırın yarn start ve React Native paketleyicisinin başarılı olduğunu bildirmesini bekleyin.
VS'de platform açılır kutusu denetiminin sağındaki Çalıştır veya Hata Ayıklama olmadan Başlat>menü seçeneğini seçin. Artık yeni uygulamanızı görüyorsunuz ve Chrome'un http://localhost:8081/debugger-ui/'yi yeni bir sekmede yüklediğini görebilirsiniz.
Web tarayıcınızda Geliştirici Araçları'nı açmak için F12 tuşunu veya Ctrl+Shift+I tuşlarını seçin.

Visual Studio Code kullanarak React Native masaüstü uygulamanızda hata ayıklama

Visual Studio Code Kurulumu
VS Code'da uygulamalar klasörünüzü açın.
VS Code için React Native Tools eklentisini yükleyin.

.vscode/launch.json uygulamalar kök dizininde yeni bir dosya oluşturun ve aşağıdaki yapılandırmayı yapıştırın:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Windows",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "windows"
        }
    ]
}

F5 tuşuna basın veya hata ayıklama menüsüne gidin (alternatif olarak Ctrl+Shift+D tuşlarına basın) ve Hata ayıklama açılan listesinde "Windows Hatalarını Ayıkla" seçeneğini belirleyin ve uygulamayı çalıştırmak için yeşil oka basın.

Aracılığıyla paylaş