Erfassen Sie Ihre Fortschritte
Trailhead-Startseite
Trailhead-Startseite

Erstellen einer React Native-Anwendung

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

  • Erstellen einer einfachen React Native-Anwendung mit Mobile SDK
  • Zugreifen auf React Native-Komponenten, die vom Mobile SDK bereitgestellt werden
  • Hinzufügen der entsprechenden Informationen zu Ihrer verbundenen Anwendung
  • Erstellen und Testen Ihrer Mobile SDK React Native-Anwendung

Erstellen einer React Native-Anwendung mit Forcereact

Im folgenden Beispiel wird eine React Native-Anwendung mit forcereact unter Mac OS X erstellt. Sie können forcereact unter Mac OS X oder Windows verwenden, doch eine iOS React Native-Anwendung kann nur unter OS X entwickelt werden.

  1. Um eine React Native-Anwendung zu erstellen, führen Sie forcereact create in einem Terminal-Fenster aus.
  2. Geben Sie die folgenden Werte an den Eingabeaufforderungen ein:

    • Plattform: Kommagetrennte Liste mit einer oder mehreren Plattformen. Hier kann ios, android oder ios,android angegeben werden.
    • Anwendungsname: FirstReact

    • Paketname: com.mytrail.react

    • Organisationsname: MyTrail, Inc.

    • Ausgabeverzeichnis: FirstReact

    So sollte Ihre Eingabe aussehen (natürlich ohne unsinnige Syntaxmarkierungen):
    $ forcereact create
    Enter the target platform(s) separated by commas (ios, android): ios,android
    Enter your application name: FirstReact
    Enter your package name: com.bestapps.ios
    Enter your organization name (Acme, Inc.): BestApps.com
    Enter output directory for your app (leave empty for the current directory): FirstReact

Anwendungsname, Paketname, Organisationsname und Ausgabeverzeichnis sind benutzerdefinierte Eigenschaften, die Sie angeben.

Was erstellt dieser forcereact-Aufruf? Eine React Native-Anwendung, die

  • FirstReact heißt,
  • sowohl iOS als auch Android unterstützt,
  • mit Mobile SDK-Bibliotheken erstellt wird
  • und sich im Verzeichnis <aktuelles_Verzeichnis>/FirstReact/ befindet.
Hinweis

Hinweis

Wenn Sie das erste Mal eine forcereact-Anwendung auf einem Entwicklungsrechner erstellen, sollten Sie sich auf eine Wartezeit von mehreren Minuten einstellen, während die React Native-Bibliotheken heruntergeladen werden.

Festlegen von Werten für die verbundene Anwendung

Nachdem in einer Befehlszeilennachricht gemeldet wurde, dass Ihr Projekt fertig ist, aktualisieren Sie das neue Projekt, damit es die Einstellungen Ihrer verbundenen Anwendung widerspiegelt.

iOS

  1. Öffnen Sie in Xcode die Datei <aktuelles_Verzeichnis>/FirstReact/ios/FirstReact.xcworkspace.
  2. Navigieren Sie in der Projektansicht zu FirstReact/FirstReact/Classes und öffnen Sie dann die Datei AppDelegate.m.
  3. Ersetzen Sie im oberen Teil der Datei die Standardwerte von RemoteAccessConsumerKey und OAuthRedirectURI durch Ihre eigenen Einstellungen.
// Fill these in when creating a new Connected Application on Lightning Platform
static NSString * const RemoteAccessConsumerKey = 
    @"3MVG9Iu66FKeHhINkB1l7xt7kR8czFcCTUhgoA8Ol2Ltf1eYHOU4SqQRSEitYFDUpqRWcoQ2.dBv_a1Dyu5xa";
static NSString * const OAuthRedirectURI = @"testsfdc:///mobilesdk/detect/oauth/done";

Android

  1. Klicken Sie im Willkommensbildschirm von Android Studio auf Import Project (Eclipse ADT, Gradle, etc.). Falls in Android Studio bereits ein anderes Projekt geöffnet ist, wählen Sie File | Open.
  2. Wählen Sie das Verzeichnis <aktuelles_Verzeichnis>/FirstReact/android aus und klicken Sie auf OK.
  3. Öffnen Sie in der Projektansicht die Datei app/res/values/bootconfig.xml.
  4. Ersetzen Sie die Werte von remoteAccessConsumerKey und oauthRedirectURI durch Ihre eigenen Einstellungen.
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="remoteAccessConsumerKey">3MVG9Iu66FKeHhINkB1l7xt7kR8czFcCTUhgoA8Ol2Ltf1eYHOU4SqQRSEitYFDUpqRWcoQ2.dBv_a1Dyu5xa</string>
   <string name="oauthRedirectURI">testsfdc:///mobilesdk/detect/oauth/done</string>
   <string-array name="oauthScopes">
       <item>api</item>
   </string-array>
   <string name="androidPushNotificationClientId"></string>
</resources>

Erstellen und Testen Ihrer React Native-Anwendung

Um Ihre React Native-Anwendung auszuführen, kehren Sie zur Terminal-Anwendung oder zur Windows-Befehlszeile zurück.

Bei der Erstellung Ihrer React Native-Anwendung wird ein Bundle angelegt, das Ihre benutzerdefinierten JavaScript-Komponenten enthält. Damit sich der JavaScript-Code und der native Code beim Ausführen der Anwendung verstehen, starten Sie den React Native-Entwicklungsserver.

  1. Wechseln Sie in einem Terminal-Fenster unter MacOS oder der Eingabeaufforderung unter Windows in das Stammverzeichnis Ihrer Anwendung. In unserem Fall ist dies FirstReact.
  2. Führen Sie einen der folgenden Befehle aus:
    • Unter Mac OS: npm start
    • Unter Windows: npm run-script start-windows

Wenn in der Befehlszeile die Meldung "Loading dependency graph, done" angezeigt wird, können Sie die Anwendung von Ihrer Entwicklungsumgebung aus starten.

  1. So starten Sie eine forcereact iOS-Anwendung:
    1. Öffnen Sie FirstReact/ios/FirstReact.xcworkspace in Xcode.
    2. Klicken Sie auf Ausführen.
  2. So starten Sie eine forcereact Android-Anwendung:
    1. Navigieren Sie im Willkommensbildschirm von Android Studio oder über den Menübefehl File | Open zu FirstReact/android/.
    2. Klicken Sie auf OK.
    3. Klicken Sie auf Ausführen.

Wenn der Anmeldebildschirm angezeigt wird, geben Sie die Anmeldeinformationen für Ihre Developer Edition-Organisation ein. Autorisieren Sie die Anwendung bei der entsprechenden Aufforderung zum Datenzugriff. Anschließend wird eine Listenansicht angezeigt.

Listenansicht in der React Native-Anwendung

Hier ist sie – Ihre funkelnagelneue Mobile SDK React Native-Anwendung.

Halt – wo sind meine JavaScript-Dateien?

Wenn Sie in Xcode oder Android Studio durch Ihr Projekt geblättert haben, fragen Sie sich vielleicht: Wo sind die React Native JavaScript- und Markup-Dateien? Sie werden sie im Xcode- oder Android Studio-Projekt nicht finden. Da diese JavaScript-Dateien von iOS- und Android-Anwendungen gemeinsam genutzt werden können, werden sie eine Ebene höher erstellt und in den Build-Einstellungen des Projekts nur referenziert. Sie finden die Datei index.ios.js bzw. die Datei index.android.js auf derselben Ebene wie den Ordner ios/ bzw. android/.

React Native JavaScript-Dateien für iOS im Finder

React Native JavaScript-Dateien für Android im Finder

React Native-Komponenten für das Mobile SDK

Einige der ersten Codezeilen in der Datei app.js importieren die "Geheimzutaten" aus dem Mobile SDK. Das Mobile SDK bietet JavaScript-Komponenten, mit denen React Native-Anwendungen auf Mobile SDK-Funktionen zugreifen können. Zu diesen Komponenten gehören:

  • react.force.oauth.js (Anmeldung, Identität und Authentifizierung)
  • react.force.network.js (REST-API-Hilfsklassen und -Dienstprogramme)
  • react.force.smartstore.js (Offline-Caching-Funktion SmartStore)
  • react.force.mobilesync.js (Mobile Sync: Mechanismus zur Offline-Synchronisierung)
Wie die in Hybridanwendungen verwendeten Mobile SDK-Komponenten definieren diese Komponenten Brücken von JavaScript zum nativen Mobile SDK-Code. Sie importieren sie aus der Bibliothek react-native-force in Ihre app.js-Datei. Um alle Komponenten zu importieren, verwenden Sie beispielsweise folgenden Befehl:
import {oauth, network, smartstore, mobilesync} from 'react-native-force';
Sie geben den Pfad zu react-native-force-Komponenten im Abschnitt dependencies der package.json-Datei an, die sich auf der obersten Ebene Ihrer Anwendung befindet. In der Regel verwenden Sie das Repository SalesforceMobileSDK-ReactNative.git:
...
"react-native-force": "https://github.com/forcedotcom/SalesforceMobileSDK-ReactNative.git"
...

Wenn Sie dieses Repo lokal verzweigt haben, können Sie diesen Pfad auf Ihren lokalen Zweig einstellen.

Hinweis

Hinweis

Die force.js-Bibliothek kann nicht mit React Native verwendet werden.

Echtzeit-Testing

Und jetzt amüsieren wir uns ein bisschen!

Öffnen Sie die Datei app.js aus dem Stammverzeichnis Ihrer Anwendung in einem Texteditor. Suchen Sie den folgenden Codeauszug am Ende der Datei.
const styles = StyleSheet.create({    
    container: {        
        flex: 1,        
        backgroundColor: 'red',    
    },
    header: {        
        height: 50,
        alignItems:'center'
    },
    row: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: 'white',
        flexDirection: 'row',
        padding: 12,
    },
...
Ändern Sie in der Eigenschaft row des Objekts styles die Einstellung backgroundColor in "red":
row: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'red',
    flexDirection: 'row',
    padding: 12,    
},

Wechseln Sie zu Ihrem iOS-Simulator und drücken Sie Command-R. Sehen Sie den roten Hintergrund?

Listenansicht der React Native-Anwendung mit rotem Hintergrund

Sie können alle Änderungen, die Sie in der React Native JavaScript-Quelle speichern, als Vorschau anzeigen, indem Sie einfach den Emulator oder Simulator aktualisieren.