# opencode React Native: Projede Verimli Kullanım Rehberi

Adres: https://agentvera.dev/blog/opencode-ile-react-native/ · Yayın: 2026-11-01

React Native projesinde opencode komutuyla nasıl çalışılır? AGENTS.md kurulumu, tipik görevler, testler ve paralel ajan kullanımı bu pratik rehberde.

**Kısaca:**

- opencode, React Native projesinde AGENTS.md ile komutları, klasör yapısını ve kuralları öğrenerek daha tutarlı diff üretir.
- Küçük adımlarla plan yapıp Jest ve TypeScript kontrollerini her turda çalıştırmak native kod kaynaklı sürprizleri azaltır.
- Paralel çalışmada her ajanı ayrı git worktree’de çalıştırmak dosya çakışmalarını önler ve incelemeyi kolaylaştırır.

[opencode](/ajanlar/opencode/), terminalde proje klasöründe `opencode` komutuyla başlatılan bir kodlama ajanıdır. React Native projesinde doğru AGENTS.md ve küçük adımlı çalışma döngüsüyle ekran, navigasyon, native modül ve test değişikliklerini planlayıp uygulayabilirsiniz. Bu rehberde Expo ve bare workflow’a uygun pratik kurulum ve kullanım adımları var; opencode hakkında genel kullanım için [opencode nasıl kullanılır? Adım adım rehber](/blog/opencode-nasil-kullanilir/) sayfasına da bakabilirsiniz.

## opencode neden React Native işlerine uygun?
React Native projeleri genellikle üç ayrı katmanda hata üretir: JavaScript/TypeScript, Metro/Babel yapılandırması ve iOS/Android native tarafı. opencode proje klasörünün tamamını gördüğü için package.json, app.json, babel.config.js, tsconfig.json, jest.config.js ve ios/android klasörlerini aynı bağlamda değerlendirir. Bir hata oluştuğunda `npx tsc --noEmit`, `npm test`, `npx expo start` gibi komutları çalıştırıp çıktıyı okuyabilir; bu da özellikle React Navigation tip hataları veya native modül bağlantı sorunları gibi çok katmanlı problemleri daraltmayı kolaylaştırır. Ayrıca AGENTS.md dosyasındaki kuralları her oturumda okuduğu için ekipten bağımsız, tutarlı bir kod stili izler. Örneğin, yeni bir ekran eklerken navigasyon tiplerini güncellemeyi unutmaz, çünkü bu kuralı dosyada görür ve uygular. opencode ile diğer CLI ajanları karşılaştırmak isterseniz [opencode mu Claude Code mu? Dürüst bir karşılaştırma](/blog/opencode-mu-claude-code-mu/) yazısına göz atabilirsiniz.

## Projeyi ajana hazırlama: AGENTS.md
opencode, proje kökündeki AGENTS.md dosyasını talimat olarak okur. React Native projesinde bu dosyaya yalnızca genel komutlar değil, çalışma zamanı kuralları da yazılmalı: hangi workflow kullanılıyor, native klasörler elle düzenleniyor mu, test mock stratejisi ne, yeni ekran nasıl eklenir. Aşağıdaki örnek, Expo tabanlı bir proje için kısa ama yeterli bir başlangıçtır.

```markdown
# AGENTS.md

## Komutlar
- Bağımlılık: npm install
- Geliştirme: npx expo start --dev-client
- Test: npm test -- --watchAll=false
- Lint: npm run lint
- Tip kontrolü: npx tsc --noEmit

## Klasör kuralları
- Ekranlar: src/screens/<Feature>/<Screen>.tsx
- Ortak bileşenler: src/components
- Navigasyon: src/navigation/RootNavigator.tsx
- API ve state: src/services, src/store

## React Native kuralları
- Expo managed workflow kullan; native klasörü elle düzenleme.
- Native modül gerekiyorsa config plugin veya prebuild sonrası değişikliği AGENTS.md'ye not et.
- Yeni ekran eklerken React Navigation tip parametrelerini güncelle.
- Testlerde @testing-library/react-native kullan; native modülleri mock'la.
- Metin daima <Text> içinde olsun; stil birleşimlerinde StyleSheet.create kullan.
```

Bu dosyayı sade tutun; ajan, çelişkili veya çok uzun talimatlarda önemli kuralı gözden kaçırabilir. Native modül ekleyecekseniz `pod install` veya Gradle sync komutunu kendiniz çalıştırmak istediğinizi AGENTS.md’ye açıkça yazın; böylece ajan yalnızca gerekli değişiklikleri önerir. Ayrıca, projenin platforma özel dosyaları (`Button.ios.tsx`, `Button.android.tsx`) nasıl yöneteceğini de belirtebilirsiniz; örneğin, her iki dosyada da aynı mantığın korunmasını isteyebilirsiniz. AGENTS.md statik değildir; yeni bir kural keşfettiğinizde dosyayı güncelleyin, böylece ajan sonraki oturumlarda da aynı hatayı yapmaz.

## Çalışma döngüsü: plan, küçük adım, test, diff
opencode ile React Native’de en verimli döngü şöyledir: önce ajandan dosya düzeyinde plan isteyin, sonra tek bir ekran veya tek bir hata için küçük bir diff üretmesini söyleyin, ardından test ve tip kontrolünü çalıştırın, son olarak `git diff` ile değişiklikleri inceleyin. Native tarafı içeren bir değişiklikte plana `pod install` veya Gradle sync adımını da ekleyin. Her turda tek bir sorumluluk vermek, Metro önbelleği veya native bağlantı sorunlarını ayıklarken hayat kurtarır. Ajan çok geniş bir değişiklik yaparsa geri almak zorlaşır; bu yüzden "bir ekran ekle" yerine "RootNavigator’a Profile rotasını ekle, sonra Profile bileşenini oluştur" gibi adım adım ilerleyin. Aşağıdaki promptlar tipik React Native işleri için başlangıç noktasıdır:

- Mevcut navigasyon yapısını incele; 'Profil' ekranının eklenmesi için değişecek dosyaları sırayla listele, kod yazma.
- RootNavigator.tsx içindeki ParamList’e `Profile: { userId: string }` ekle, ardından Profile ekranını oluştur ve geri butonunu bağla.
- Jest şu hatayı veriyor: `Unable to find node on an unmounted component`. Yalnızca Profile.test.tsx içindeki temizleme mantığını düzelt, bileşeni değiştirme.
- src/services/api.ts içindeki hata yönetimini `ApiError` sınıfıyla refactor et; her adımdan sonra `npx tsc --noEmit` ve `npm test -- --watchAll=false` çalıştırıp özet çıkar.
- Bu bileşende inline style’ları StyleSheet.create içine taşı; dokunmadığın dosyaları diff’te gösterme.

Bu döngüyü her oturumda tekrarlayın. Ajan bazen ikinci veya üçüncü adımda context’i kaybedebilir; o yüzden her yeni promptta önceki adımın özetini vermek faydalıdır.

## opencode’un iyi yaptığı işler ve dikkat edilecek yerler
opencode özellikle tip güvenliği, navigasyon ve test tarafında rahat çalışır; buna karşılık native derleme adımları ve platforma özel dosyalarda daha sıkı gözetim gerekir. Aşağıdaki tablo, hangi katmanda ne bekleyeceğinizi özetler.

| Katman | opencode’un güçlü olduğu işler | Dikkat edilecekler |
| --- | --- | --- |
| TypeScript + bileşenler | props/state düzenleme, hook geçişleri, stil taşıma | `any` kaçışları, `StyleProp<T>` yerine genel tip kullanımı |
| React Navigation | ParamList tipi, yeni ekran, deep link yapılandırması | Tip güncellemesi unutulursa `navigate` hataları çalışma zamanında çıkar |
| Metro/Babel | alias, env değişkenleri, plugin ekleme | Önbellek sorunları `npx expo start --clear` gerektirebilir |
| Jest | mock’lar, async test, bekleme kalıpları | Native modül mock’u atlanırsa testler yanıltıcı geçebilir |
| Native modüller | mevcut köprüyü JS tarafında bağlama | `pod install`, Gradle sync, platform dosya senkronu |

Özellikle Expo managed workflow kullanıyorsanız, ajanın `ios/` ve `android/` klasörlerinde doğrudan değişiklik yapmasına izin vermeyin; bu dosyalar prebuild ile yeniden üretilebilir. Native değişiklik gerektiren bir bağımlılık eklerken önce `npx expo install` kullanmasını, sonra `pod install` komutunu size bırakmasını isteyin. React Native’in platforma özel dosya çözümlemesi nedeniyle `Button.ios.tsx` ve `Button.android.tsx` dosyaları arasındaki farkı ajan bazen karıştırabilir; diff’i bu açıdan da kontrol edin. Ayrıca, bir bileşende `requireNativeComponent` kullanıyorsa, ajanın bu bileşeni mock’lamadan test yazmasına engel olun; test sırasında gerçek native modül çağrısı yapılmamalı. Son olarak, Metro’nun modül çözümlemesiyle ilgili sorunlarda ajanın önerdiği çözümü hemen uygulamayın; önce `npx expo start --clear` ile önbelleği temizleyip tekrar denemek daha güvenlidir.

## React Native’de test ve doğrulama
opencode’dan her değişiklik sonrası üç şeyi çalıştırmasını isteyin: birim testler (`npm test -- --watchAll=false`), tip kontrolü (`npx tsc --noEmit`) ve varsa lint (`npm run lint`). Jest testlerinde native modüller genellikle mock’lanmalıdır; AGENTS.md’ye hangi kütüphanenin kullanılacağını yazmazsanız ajan kendi seçimini yapabilir ve testler gerçek davranışı yansıtmayabilir. Örneğin, `react-native-device-info` veya `react-native-keychain` gibi modüller için `jest.mock` ile açık mock tanımları isteyin. Simülatörde manuel doğrulama gerektiren durumlarda ajana yalnızca kod değişikliği yapmasını, çalıştırma adımını size bırakmasını söyleyin; böylece Expo Go veya dev client üzerinde gerçek cihaz davranışını gözlemleyebilirsiniz. Ek olarak, native modül ekledikten sonra `pod install` veya Gradle sync sonrası ilk derlemenin başarılı olduğunu doğrulamak için ajandan `npx expo run:ios` veya `npx expo run:android` komutunun çıktısını özetlemesini isteyebilirsiniz; ancak bu komutu kendiniz çalıştırmanız daha güvenlidir çünkü uzun sürebilir ve simülatör durumuna bağlıdır.

## Paralel ajanlar: AgentVera ile React Native’de iş bölümü
React Native projesinde birden fazla ajanı aynı anda çalıştırmak isterseniz AgentVera güvenli bir ortam sağlar. Her ajan kendi git worktree’sinde çalışarak dosyaları birbirinin üzerine yazmaz; otomatik kod incelemesi sayesinde bir ajan bitirdiğinde değişiklikleri ikinci bir model kontrol eder ve bulgular dosya:satır seviyesinde bağlanır. Token bütçeleri ve checkpoint özellikleri de uzun native build süreçlerinde yanlış adımı geri almayı kolaylaştırır. Detaylı araç karşılaştırması için [paralel kodlama ajanları için en iyi araçlar](/blog/paralel-yapay-zeka-kodlama-ajani-araclari/) sayfasına bakabilirsiniz.

## Sonuç
opencode, React Native projesinde AGENTS.md ile yönlendirildiğinde navigasyon, tip güvenliği, test ve native modül köprüsü gibi konularda güvenilir bir yardımcıdır. Küçük adımlı döngüyü disiplinle uygular ve native komutları kendiniz çalıştırırsanız, ajanın ürettiği diff’ler hem daha güvenli hem de daha hızlı entegre olur. Paralel iş yükü için AgentVera’daki git worktree ve otomatik inceleme mekanizmaları, React Native’in çok katmanlı yapısında çakışmaları en aza indirir.

## Sık sorulanlar

**opencode React Native projesinde nasıl başlatılır?** Proje klasörüne gidip terminalde opencode yazmanız yeterli. Başlamadan önce AGENTS.md dosyasını proje köküne ekleyerek build, test ve klasör kurallarını tanımlarsanız ajan daha tutarlı çalışır.

**opencode Expo projesinde native modül değişikliklerini yönetebilir mi?** Evet, gerekli bağımlılıkları ve config plugin değişikliklerini önerebilir. Ancak pod install veya Gradle sync gibi native komutların sizin onayınızla çalışmasını isteyerek diff’i incelemeniz daha güvenlidir.

**opencode React Native’de Jest testlerini çalıştırabilir mi?** Evet, npm test -- --watchAll=false gibi komutları çalıştırıp çıktıyı okuyabilir. Native modülleri mock’laması gerektiğinde hangi kütüphaneyi kullanacağını söylemeniz testlerin güvenilirliğini artırır.

**opencode ile React Native’de paralel ajan çalıştırmak güvenli mi?** AgentVera üzerinden her ajanı kendi git worktree’sinde çalıştırırsanız dosya çakışması yaşanmaz. Otomatik kod incelemesi ve checkpoint’ler de paralel iş yükünü daha yönetilebilir kılar.

---

**AgentVera hakkında.** AgentVera, Solviera Teknoloji tarafından geliştirilen macOS, Windows ve Linux masaüstü uygulamasıdır. 18 yapay zeka kodlama ajanını (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) proje bazında, gerçek terminallerde ve kullanıcının kendi CLI kurulum ve girişleriyle yan yana çalıştırır. Ücretsiz planda sınırsız ajan vardır. İndir: https://agentvera.dev/indir/ · Fiyatlar: https://agentvera.dev/fiyatlar/