Deep linking, bir web linki veya başka bir uygulama aracılığıyla kullanıcıları uygulamanızın belirli bir ekranına doğrudan yönlendirme tekniğidir. Örneğin, bir e-posta içindeki "sipariş detayı" linkine tıklayan kullanıcı, doğrudan o siparişin bulunduğu ekrana yönlendirilebilir. React Native'de bu işlemi React Navigation kütüphanesiyle kolayca gerçekleştirebilirsiniz. Bu adım adım rehberde, temel deep linking yapılandırmasını kurduktan sonra, iOS ve Android'e özel ayarları da dahil ederek eksiksiz bir çözüm sunacağız.
Adım 1: Gerekli Bağımlılıkları Kurun
Projenize React Navigation ve deep linking için gerekli paketleri ekleyin.
- React Navigation kurulumu:
npm install @react-navigation/native @react-navigation/native-stack - Gerekli bağımlılıklar:
npm install react-native-screens react-native-safe-area-context - Linking paketi: React Navigation zaten dahili olarak deep linking desteği sunar ancak manuel yapılandırma için
npm install @react-navigation/nativeyeterlidir.
iOS için npx pod-install komutunu çalıştırmayı unutmayın.
Adım 2: Navigasyon Yapısını Oluşturun
Uygulamanızda bir ana stack navigator oluşturun. Her ekran için bir name değeri belirleyin; bu değerler, deep link URL'lerindeki yol ile eşleşecektir.
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function AppNavigator() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="OrderDetails" component={OrderDetailsScreen} />
</Stack.Navigator>
);
}Adım 3: Deep Linking Yapılandırmasını Tanımlayın
Uygulamanızın destekleyeceği URL şemalarını ve yol yapılarını belirleyin. Örneğin yourapp:// özel şeması veya https://www.yourapp.com evrensel linkleri kullanabilirsiniz.
const linking = {
prefixes: ['yourapp://', 'https://www.yourapp.com'],
config: {
screens: {
Home: '',
Profile: 'profile',
OrderDetails: 'order/:orderId'
}
}
};Bu yapılandırmada order/:orderId parametresi sayesinde order/123 gibi linkler doğrudan ilgili sipariş ekranını açar.
Adım 4: Ana Uygulama Bileşenine Linking Prop'unu Ekleyin
NavigationContainer bileşenine linking prop'unu ekleyin. Bu sayede React Navigation, gelen linkleri otomatik olarak dinler ve yönlendirir.
function App() {
return (
<NavigationContainer linking={linking}>
<AppNavigator />
</NavigationContainer>
);
}Adım 5: Ekran Bileşenlerinde Parametreleri Kullanın
Deep link ile gelen parametrelere ekran bileşeninde route.params üzerinden erişebilirsiniz.
function OrderDetailsScreen({ route }) {
const { orderId } = route.params;
// orderId'yi kullanarak API'den veri çekin
}Eğer derin link ile bir kimlik doğrulama token'ı (JWT) geliyorsa, güvenli bir şekilde saklamak için JWT Kimlik Doğrulama rehberine göz atabilirsiniz.
Adım 6: iOS İçin Evrensel Link (Universal Link) Ayarları
iOS'ta evrensel linkler, HTTPS tabanlı linklerin doğrudan uygulamanızı açmasını sağlar. Bunun için:
- Apple App Site Association dosyasını hazırlayın. Sunucunuzun kök dizinine
apple-app-site-association(JSON formatında, uzantısız) dosyasını ekleyin. İçeriği:{ "applinks": { "apps": [], "details": [{ "appID": "TEAMID.BUNDLEID", "paths": ["/profile", "/order/*"] }] } } - Xcode projenizde Associated Domains ekleyin. Yetenekler (Capabilities) sekmesinden
applinks:www.yourapp.comekleyin.
Adım 7: Android İçin Derin Bağlantı Ayarları
Android'de derin bağlantılar AndroidManifest.xml dosyasındaki intent filtreleri ile yapılır. MainActivity için aşağıdaki intent filter'ı ekleyin:
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="yourapp" />
<data android:scheme="https" android:host="www.yourapp.com" />
</intent-filter>Ek olarak, Android'in App Links özelliğini kullanmak için sunucunuza assetlinks.json dosyası ekleyin.
Adım 8: Deep Linkleri Test Edin
Uygulamanızı yükledikten sonra aşağıdaki gibi test linklerini kullanarak çalışıp çalışmadığını kontrol edin:
- Özel şema:
yourapp://profile - Evrensel link:
https://www.yourapp.com/order/12345
iOS simülatöründe xcrun simctl openurl booted [link] komutunu kullanabilirsiniz. Android emülatöründe ise adb shell am start -W -a android.intent.action.VIEW -d [link]
Sık Yapılan Hatalar ve Dikkat Edilmesi Gerekenler
- Yanlış prefix tanımı:
prefixesdizisine sadece şema değil, HTTPS linklerinin tamamını (protokol dahil) ekleyin. - Android intent filter'da scheme eksik: Hem özel şema hem HTTPS için ayrı ayrı
<data>etiketi ekleyin. - Universel linkte server doğrulaması: Apple ve Google, dosyaların doğru yerde ve SSL ile sunulduğunu kontrol eder. Dosyaların JSON formatına uygun olduğundan emin olun.
- Parametre tipi kontrolü: Deep link ile gelen parametreler her zaman string olur. Sayısal bir değer bekliyorsanız dönüşüm yapın.
Deep linking, kullanıcı deneyimini büyük ölçüde iyileştiren bir özelliktir. Özellikle push bildirimleri, e-posta kampanyaları veya sosyal medya paylaşımları ile entegre çalışır. Eğer Flutter vs React Native karşılaştırmasında hangi framework'ün sizin için daha uygun olduğuna karar vermek isterseniz, ilgili yazımızı okuyabilirsiniz. Aynı zamanda, derin linkler ile gelen verileri sayfalama gerektiren bir liste ekranına yönlendiriyorsanız, REST API'lerde Sayfalama makalemiz de işinize yarayacaktır.
Sık Sorulan Sorular
Deep linking nedir ve neden kullanılır?
Deep linking, kullanıcıları doğrudan uygulama içindeki belirli bir ekrana yönlendiren URL yapısıdır. Kullanıcı deneyimini artırır, pazarlama kampanyalarında dönüşüm oranlarını yükseltir ve uygulama içi gezinmeyi kolaylaştırır.
React Native'de deep linking için hangi kütüphane kullanılır?
React Navigation, deep linking desteğini doğrudan sunar. Ek olarak @react-navigation/native paketi yeterlidir, ayrı bir kütüphaneye ihtiyaç duymazsınız.
iOS ve Android arasında deep linking yapılandırmasında fark var mı?
Evet, iOS evrensel linkler (Universal Links) için Apple App Site Association dosyası ve Xcode'da Associated Domains eklenmesini gerektirirken, Android intent filtreleri ve App Links için assetlinks.json dosyası kullanır. Özel şema (custom scheme) her iki platformda da benzer şekilde yapılandırılabilir.
Deep link ile parametre nasıl iletilir?
Deep link URL'sinde path parametreleri kullanılır. Örneğin, 'order/:orderId' yapılandırmasında URL'deki 'order/12345' kısmı otomatik olarak route.params.orderId olarak ekrana iletilir.
Deep linking çalışmıyorsa ne yapmalıyım?
Öncelikle prefix ve screen yapılandırmasını kontrol edin. iOS'ta sunucudaki apple-app-site-association dosyasının geçerliliğini, Android'de intent filter'ların doğru eklendiğini teyit edin. Test komutları ile linki manuel gönderip hata loglarını inceleyin.
