React Native Deep Linking für iOS und Android

Blog

Wir leben in einer neuen Ära, in der alles miteinander verbunden ist und wir häufiger als zuvor Links teilen. Wir möchten auch, dass unsere Kunden unabhängig von der verwendeten Plattform so schnell wie möglich auf die gewünschte Seite gelangen. ne

Wenn Sie Deep Linking nicht verwenden, haben Sie kein optimales Kundenerlebnis.

Deep Linking bedeutet nicht nur, dass Sie einen anklickbaren Link haben, der Ihre App öffnet, sondern es ist auch eine intelligente Möglichkeit, zur gewünschten Seite zu navigieren.

Bitbucket Pre-Commit-Hook

Was ist DeepLink?

Deep Linking ist eine Technik, mit der eine App als Reaktion auf ein externes Ereignis mit einer bestimmten Benutzeroberfläche oder Ressource geöffnet werden kann. Die Tiefe bezieht sich auf die Tiefe der Seite in einer hierarchischen Seitenstruktur einer App. Dies ist eine sehr wichtige Funktion für die Benutzerinteraktion, sie macht die App auch reaktionsschneller und kann als Reaktion auf externe Ereignisse wie . zu beliebigen Inhalten navigieren Push-Benachrichtigungen, E-Mails, Weblinks usw.

Sie müssen die generische Verlinkung schon einmal gesehen haben, wie bei der Verwendung von |_+_| Es öffnet die Standard-Mail-App mit Prefill my email. In unserem Beispiel implementieren wir ähnliche URL-Schemata, die externe URIs verarbeiten. Nehmen wir an, wir wollen einen URI wie myapp://article/4 um unsere App zu öffnen und direkt zu einem Artikelbildschirm zu verlinken, der die Artikelnummer 4 anzeigt.

Welches Problem löst Deep Link?

Weblinks funktionieren nicht mit nativen mobilen Apps.


Wenn Sie mit Ihrem Mobilgerät einen Link zu einem Artikel öffnen, werden Sie auch dann in Ihrem Webbrowser zum Ziel geleitet, wenn Sie die Artikel-App installiert haben. Dies ist ein Problem, da die Artikel-App eine bessere Benutzererfahrung bietet als die mobile Version der Artikel-App.

Die andere Art der Implementierung von Deep Linking?

Es gibt zwei Möglichkeiten, Deep Linking zu implementieren:


  • URL-Schema
  • Universelle Links

URL-Schemata sind eine bekannte Methode für Deep-Links. Universelle Links sind der neue Weg, den Apple implementiert hat, um Ihre Webseite und Ihre App einfach unter demselben Link zu verbinden.

URL-Schemata sind einfacher zu implementieren als universelle Links

Richten Sie das React-native-Projekt sowohl für iOS als auch für Android ein

Wir verwenden die reaktive CLI, um ein Projekt zu erstellen, und erstellen dabei zwei Seiten Startbildschirm und dann eine Artikelseite. Dann erstellen wir Deeplinks wie myapp://article/4 und myapp://home um diese Seiten zu öffnen.

mailto:abhishek@nalwaya.com

Nachdem wir ein Projekt erstellt haben, werden wir hinzufügen reagieren-navigation und verwenden Sie dann den Link-Befehl, um die native Gestenbehandlung zu verknüpfen.

Es ist nicht erforderlich, dass Sie für Deep Linking die Reaktionsnavigation verwenden. Da es die beliebteste Navigationsbibliothek für React Native ist, haben wir diese im Tutorial verwendet.

Erstellen Sie einen src-Ordner im Stammverzeichnis und fügen Sie hinzu Artikel.js und Startseite.js Datei.

react-native init DeepLinkExample cd DeepLinkExample 


Wir haben eine Reaktionskomponente erstellt, die Text rendert Hallo von Zuhause!. Jetzt erstellen wir eine Datei Artikel.js im src-Ordner und fügen Sie folgenden Code hinzu:

yarn add react-navigation yarn add react-native-gesture-handler react-native link react-native-gesture-handler 


Wir haben die beiden Komponenten Home.js und Article.js erstellt, die wir nun in React-Navigationsrouten hinzufügen werden. Offen App.js und aktualisiere den folgenden Code:

import React from 'react'; import { Text } from 'react-native'; 

class Home extends React.Component {
static navigationOptions = {
title: ‘Home’,
};
render() {
return Hello from Home!;
}
}
export default Home;


Wir haben eine Reaktionsnavigation erstellt und Routen für zwei Seiten erstellt. Wir haben unseren Navigationscontainer so konfiguriert, dass er den Pfad aus dem eingehenden URI der App extrahiert.

Einrichtung für iOS

Lassen Sie uns zuerst für iOS einrichten und dann für Android konfigurieren. Öffnen Sie das iOS-Projekt, indem Sie auf klicken DeepLinkExample/ios/DeepLinkExample.xcodeproj /

Öffnen Sie info.plist, indem Sie oben klicken und dann auf URL-Typen klicken und URL-Schemata hinzufügen. Aktualisieren Sie es als meine App. (egal welchen Namen Sie Ihrer App geben möchten)

Dann öffnen AppDelegate.m im Stammordner und fügen Sie folgenden Header hinzu:

import React from ‘react’;  
import { Text } from ‘react-native’;
class Article extends React.Component {
static navigationOptions = {
title: ‘Article’,
};

render() {
const { id } = this.props.navigation.state.params;
return Hello from Article {id}!;
}
}
export default Article;

Und dann fügen Sie diesen Code über @end hinzu.

ticket to ride Zielkarten
import React, {Component} from ‘react’;  
import { StyleSheet, Text, View} from ‘react-native’;
import { createAppContainer, createStackNavigator} from react-navigation;
import Home from ‘./src/Home’;
import Article from ‘./src/Article’;
const AppNavigator = createStackNavigator({
Home: { screen: Home },
Article: { screen: Article, path: ‘article/:id’, },
},
{
initialRouteName: Home
}
);
const prefix = ‘myapp://myapp/’;
const App = createAppContainer(AppNavigator)
const MainApp = () => ;
export default MainApp;


Wir sind mit der Änderung für iOS fertig, testen wir sie jetzt für iOS.

Testen von DeepLink in iOS

Um DeepLink zu testen, müssen Sie die App mit . ausführen Reaktiv-natives Ausführen von ios oder über Xcode. Öffnen Sie dann den Safari-Browser im Simulator und geben Sie Folgendes ein: meineapp://article/5, es öffnet automatisch die App und öffnet Artikel mit Nr. 5.

Sie können DeepLink auch öffnen, indem Sie den folgenden Befehl auf Ihrem Terminal ausführen:

#import React/RCTLinkingManager.h  

Deeplink für Android konfigurieren

Um die externe Verknüpfung in Android zu konfigurieren, müssen wir im Manifest einen neuen Intent erstellen. Offen /src/main/AndroidManifest.xml Fügen Sie den neuen Intent-Filter innerhalb des MainActivity-Eintrags mit einer Aktion vom Typ VIEW hinzu:

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url  
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}


Wir sind alle auf Android eingestellt.

Deeplink auf Android testen

Um Deep Linking zu testen, öffnen Sie das Projekt in Android Studio und klicken Sie auf Ausführen -> Konfiguration bearbeiten . und ändern Sie die Startoptionen in URL und aktualisieren Sie die URL in myapp://article/13

Führen Sie nun die Anwendung aus, indem Sie in Android Studio auf die Schaltfläche Ausführen klicken:

Sie können den Deep-Link auch über das Terminal öffnen, indem Sie:

xcrun simctl openurl booted myapp://article/5  

Einrichten der universellen Verknüpfung

Jetzt können Sie den universellen Link für Ihre App einrichten. Zuerst wird vorschlagen, auszuchecken Apple-Dokument .

Wir müssen zuerst eine Apple-App-Site-Association für Ihre App erstellen. Laden Sie eine Apple-App-Site-Association-Datei auf Ihren Webserver hoch

http://schemas.android.com/apk/res/android   
package=com.deeplinkexample>
|_+_|

In unserem Fall sieht das so aus:

adb shell am start -W -a android.intent.action.VIEW -d myapp://article/3 com.com.deeplinkexample  

Einige der wichtigen Punkte, die Sie für die Datei beachten sollten:

  • Es sollte öffentlich zugänglich sein.
  • Es sollte als Anwendungs-/Json-Mime-Typ bereitgestellt werden
  • Die Datei sollte kleiner oder gleich 128 KB sein
  • Es sollte über Https serviert werden

Hier kannst du deine Datei testen -> https://branch.io/resources/aasa-validator/

Dann logge dich ein entwickler.apple.com mit deinem Konto und Zugehörige Domains aktivieren in deiner App-Kennung.

Starten Sie nun Xcode und wählen Sie die Registerkarte Funktionen. Aktivieren Sie Associated Domains und fügen Sie zwei Werte hinzu.

  1. Applinks:YOUR_WEBSITE_DOMAIN
  2. Aktivitätsfortsetzung:YOUR_WEBSITE_DOMAIN

Sie sind bereit für Universal Link !!

netgear ac1200 range extender bedienungsanleitung

Einpacken?

Deep Linking ist eine sehr wichtige Funktion für die Benutzerbindung. Es ist auch eine Grundlage für die Einrichtung von Push-Benachrichtigungen, E-Mail-Marketing, Social Sharing usw. Warten Sie also nicht, dies in Ihrer App zu implementieren.

Code des Beispiels finden Sie hier -> https://github.com/nalwayaabhishek/DeepLinkExample

Viel Spaß beim Verbinden der Welt mit Ihrer App !!

Danke fürs Lesen

Wenn dir dieser Beitrag gefallen hat, teile ihn mit all deinen Programmierfreunden!

Folge mir auf Facebook | Twitter

Erfahren Sie mehr

Der komplette React Native und Redux Kurs

React Native - Der praktische Leitfaden

Der komplette React Native Kurs (2. Auflage)

React Native vs Flutter (Was ist am besten für Startups?)

So erstellen Sie eine Nachrichten-App mit JavaScript und React Native

React Native – Die Zukunft des Mobilfunks

Styling in React Native

Was soll ich wählen: React Native oder Flutter?

React Native Web Full App Tutorial - Erstellen Sie eine Trainings-App für iOS, Android und Web

#react-native #ios #android

medium.com

React Native Deep Linking für iOS und Android

Wir leben in einer neuen Ära, in der alles miteinander verbunden ist und wir häufiger als zuvor Links teilen. Wir möchten auch, dass unsere Kunden unabhängig von der verwendeten Plattform so schnell wie möglich auf die gewünschte Seite gelangen. ne