Erstellen einer React Native-Anwendung

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

Im folgenden Beispiel wird eine React Native-Anwendung mit forcereact unter macOS X erstellt. Sie können forcereact unter macOS X oder Windows verwenden, doch eine iOS React Native-Anwendung kann nur unter macOS 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.

   • Anwendungstyp: Drücken Sie die <Eingabetaste.>
   • Anwendungsname: FirstReact

   • Paketname: com.mytrail.react

   • Organisationsname: MyTrail, Inc.

   • Ausgabeverzeichnis: FirstReact

3. So sollte Ihre Eingabe aussehen (natürlich ohne unsinnige Syntaxmarkierungen):

4. $ forcereact create
   Enter the target platform(s) separated by commas (ios, android): ios,android
   Enter your application type (react_native_typescript or react_native, leave empty for react_native_typescript): <Return>
   Enter your application name: FirstReact
   Enter your package name: com.mytrail.react
   Enter your organization name (Acme, Inc.): MyTrail, Inc.
   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,
• den Einsatz von TypeScript unterstützt
• mit Mobile SDK-Bibliotheken erstellt wird
• und sich im Verzeichnis <aktuelles_Verzeichnis>/FirstReact/ befindet.

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.

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

<?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>

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 an der Eingabeaufforderung unter Windows in das Stammverzeichnis Ihrer Anwendung. In unserem Fall ist dies FirstReact.
2. Führen Sie einen der folgenden Befehle aus:
   • yarn start oder npm start 

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 (Posten).
   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.

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

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. Suchen Sie die Datei "app.tsx" auf der Ebene des Ordners ios/ oder android/.

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.ts (Anmeldung, Identität und Authentifizierung)
• react.force.network.ts (REST-API-Hilfsklassen und -Dienstprogramme)
• react.force.smartstore.ts (Offline-Caching-Funktion von SmartStore)
• react.force.mobilesync.ts (Mechanismus zur Offline-Synchronisierung von Mobile Sync)

import {oauth, net, smartstore, mobilesync} from 'react-native-force';

...
"react-native-force": "git+https://github.com/forcedotcom/SalesforceMobileSDK-ReactNative.git#v9.0.0"
...

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

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

Und jetzt amüsieren wir uns ein bisschen!

const styles = StyleSheet.create({    
    container: {        
        flex: 1, 
        paddingTop: 22,    
        backgroundColor: 'white',    
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },

const styles = StyleSheet.create({
    ...
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
        backgroundColor: 'red',
    }
});

Wechseln Sie zu Ihrem iOS-Simulator und drücken Sie Command-R. Sehen Sie den roten 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.

• Entwicklerhandbuch für das Mobile SDK: React Native-Entwicklung