Erste Schritte mit dem React Native Client SDK

Nachdem Sie die allgemeinen Anweisungen zum Einrichten Ihres CodePush-Kontos befolgt haben, können Sie mit der Integration von CodePush in Ihre React Native-App beginnen, indem Sie den folgenden Befehl im Stammverzeichnis Ihrer App ausführen:

npm install --save react-native-code-push

Wie bei allen anderen React Native Plug-Ins unterscheidet sich die Integrationserfahrung für iOS und Android. Führen Sie daher die Einrichtungsschritte aus, je nachdem, welche Plattform(en) Sie für Ihre App als Ziel verwenden. Hinweis: Wenn Sie auf beide Plattformen abzielen, empfiehlt es sich, separate CodePush-Anwendungen für jede Plattform zu erstellen.

Wenn Sie sehen möchten, wie andere Projekte in CodePush integriert wurden, sehen Sie sich die Beispiel-Apps an, die von der Community bereitgestellt werden. Wenn Sie sich mit CodePush + React Native vertraut machen möchten, sehen Sie sich die Ersten Schritte Videos von Bilal Budhani und Deepak Sisodiya an.

iOS-Setup

Sobald Sie über das CodePush-Plug-In verfügen, müssen Sie es in das Xcode-Projekt Ihrer React Native-App integrieren und ordnungsgemäß konfigurieren.

Plug-In-Installation und -Konfiguration für React Native Version 0.60 und höher (iOS)

1. Führen Sie aus cd ios && pod install && cd .. , um alle erforderlichen CocoaPods-Abhängigkeiten zu installieren.

2. Öffnen Sie die AppDelegate.m Datei, und fügen Sie eine import-Anweisung für die CodePush-Header hinzu:

   #import <CodePush/CodePush.h>
   

3. Suchen Sie die folgende Codezeile, die die Quell-URL für Bridge für Produktionsversionen festlegt:

   return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
   

4. Ersetzen Sie sie durch diese Zeile:

   return [CodePush bundleURL];
   

   Durch diese Änderung wird Ihre App so konfiguriert, dass immer die neueste Version des JS-Bundles Ihrer App geladen wird. Beim ersten Start entspricht dies der Datei, die mit der App kompiliert wurde. Nachdem ein Update jedoch über CodePush gepusht wurde, gibt dies den Speicherort des zuletzt installierten Updates zurück.

   Hinweis

   Die bundleURL -Methode setzt voraus, dass das JS-Bundle Ihrer App den Namen hat main.jsbundle. Wenn Sie Ihre App so konfiguriert haben, dass sie einen anderen Dateinamen verwendet, rufen Sie die bundleURLForResource: -Methode (wobei angenommen wird, dass Sie stattdessen die .jsbundle Erweiterung verwenden) oder bundleURLForResource:withExtension: stattdessen die -Methode auf, um dieses Standardverhalten zu überschreiben.

   In der Regel möchten Sie codePush nur verwenden, um den Speicherort Ihres JS-Bundles innerhalb von Releasebuilds aufzulösen. Es wird empfohlen, das DEBUG Vorprozessormakro zu verwenden, um dynamisch zwischen der Verwendung des Packager-Servers und CodePush zu wechseln, je nachdem, ob Sie debuggen oder nicht. Dies macht es viel einfacher, sicherzustellen, dass Sie das richtige Verhalten erhalten, das Sie sich in der Produktion wünschen, während Sie zur Debugzeit weiterhin die Chrome-Dev-Tools, live reload usw. verwenden.

   Ihre sourceURLForBridge-Methode sollte wie folgt aussehen:

   - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
   {
     #if DEBUG
       return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
     #else
       return [CodePush bundleURL];
     #endif
   }
   

5. Fügen Sie den Bereitstellungsschlüssel zu Info.plisthinzu: Um der CodePush-Runtime mitzuteilen, für welche Bereitstellung sie Updates abfragen soll, öffnen Sie die Datei Ihrer App Info.plist , und fügen Sie einen neuen Eintrag mit dem Namen CodePushDeploymentKeyhinzu, dessen Wert der Schlüssel der Bereitstellung ist, für die Sie diese App konfigurieren möchten (z. B. den Schlüssel für die Staging Bereitstellung für die FooBar App). Sie können diesen Wert abrufen, indem Sie zur Verteilungsbenutzeroberfläche der App auf Ihrem AppCenter-Dashboard wechseln oder mit der CodePush CLI ausführen appcenter codepush deployment list --app <ownerName>/<appName> -k (das -k Flag ist erforderlich, da Schlüssel standardmäßig nicht angezeigt werden) und den Wert der Spalte kopieren, der Deployment Key der bereitstellung entspricht, die Sie verwenden möchten (siehe unten). Die Verwendung des Namens der Bereitstellung (z. B. Staging) funktioniert nicht. Dieser "Anzeigename" ist nur für die authentifizierte Verwaltungsnutzung über die CLI und nicht für die öffentliche Nutzung innerhalb Ihrer App vorgesehen.

   

   Informationen zur effektiven Nutzung der Bereitstellungen undProduction, die Staging zusammen mit Ihrer CodePush-App erstellt wurden, finden Sie in den folgenden Dokumentationen zu Tests mit mehreren Bereitstellungen, bevor Sie die Verwendung von CodePush Ihrer App tatsächlich in die Produktion verschieben.

   Hinweis

   Wenn Sie eine andere Bereitstellung dynamisch verwenden müssen, können Sie Ihren Bereitstellungsschlüssel auch mithilfe von Code-Push-Optionen im JS-Code überschreiben.*

Plug-In-Installation für React Native niedriger als 0.60 (iOS)

Um so viele Entwicklereinstellungen wie möglich zu berücksichtigen, unterstützt das CodePush-Plug-In die iOS-Installation über drei Mechanismen:

1. RNPM - React Native Paket-Manager (RNPM) ist ein großartiges Tool, das die einfachste Installationserfahrung für React Native Plug-Ins bietet. Wenn Sie es bereits verwenden oder verwenden möchten, empfehlen wir diesen Ansatz.

2. CocoaPods: Wenn Sie eine native iOS-App erstellen, die React Native einbettet, oder Wenn Sie CocoaPods lieber verwenden, empfehlen wir die Verwendung der Podspec-Datei, die wir als Teil unseres Plug-Ins liefern.

3. "Manuell" : Wenn Sie sich nicht auf zusätzliche Tools verlassen möchten oder mit ein paar zusätzlichen Installationsschritten in Ordnung sind (dies ist eine einmalige Sache), sollten Sie diesen Ansatz verwenden.

Plug-In-Installation (iOS – RNPM)

1. Ab Version 0.27 von React Native rnpm link wurde bereits mit der React Native CLI zusammengeführt. Führen Sie Folgendes aus:

   react-native link react-native-code-push
   

   Wenn Ihre App eine Version von React Native niedriger als v0.27 verwendet, führen Sie den folgenden Befehl aus:

    rnpm link react-native-code-push
   

   Hinweis

   Wenn Sie RNPM noch nicht installiert haben, können Sie dies tun, indem Sie den obigen Befehl ausführen npm i -g rnpm und dann ausführen. Wenn Sie RNPM bereits installiert haben, stellen Sie sicher, dass Sie über v1.9.0+ verfügen, um von dieser Installation in einem Schritt zu profitieren.

2. Sie werden zur Eingabe des Bereitstellungsschlüssels aufgefordert, den Sie verwenden möchten. Wenn sie noch nicht vorhanden ist, können Sie diesen Wert abrufen, indem Sie ausführen appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys, oder Sie können ihn ignorieren (indem Sie drücken <ENTER>) und ihn später hinzufügen. Für die ersten Schritte empfehlen wir die Verwendung Ihres Staging Bereitstellungsschlüssels, damit Sie CodePush ende-zu-Ende testen können.

Plug-In-Installation (iOS – CocoaPods)

1. Fügen Sie Die React Native- und CodePush-Plug-In-Abhängigkeiten zu Ihrem hinzu. Zeigen Sie Podfileauf den Pfad, in dem NPM Module installiert hat.

   # React Native requirements
   pod 'React', :path => '../node_modules/react-native', :subspecs => [
      'Core',
      'CxxBridge', # Include this for RN >= 0.47
      'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
      'RCTText',
      'RCTNetwork',
      'RCTWebSocket', # Needed for debugging
      'RCTAnimation', # Needed for FlatList and animations running on native UI thread
      # Add any other subspecs you want to use in your project
   ]
   # Explicitly include Yoga if you're using RN >= 0.42.0
   pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
   pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
   pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
   
   # CodePush plugin dependency
   pod 'CodePush', :path => '../node_modules/react-native-code-push'
   

   Hinweis

   Dateipfade für Abhängigkeiten müssen relativ zum Speicherort Ihrer App Podfile sein.

   Hinweis

   Die Bibliothek des JWT Projekts muss Version 3.0.x oder höher sein.

2. Ausführen von pod install

Plug-In-Installation (iOS – Manuell)

1. Öffnen des Xcode-Projekts Ihrer App

2. Suchen Sie die CodePush.xcodeproj Datei im node_modules/react-native-code-push/ios Verzeichnis (oder node_modules/react-native-code-push für <=1.7.3-beta Installationen), und ziehen Sie sie in den Libraries Knoten in Xcode.

   

3. Wählen Sie den Projektknoten in Xcode aus, und wählen Sie die Registerkarte "Buildphasen" Ihrer Projektkonfiguration aus.

4. Ziehen Sie libCodePush.a von Libraries/CodePush.xcodeproj/Products in den Abschnitt "Binär mit Bibliotheken verknüpfen" der Konfiguration "Buildphasen" Ihres Projekts.

   

5. Klicken Sie unter der Liste "Binär mit Bibliotheken verknüpfen" auf das Pluszeichen, und wählen Sie die libz.tbd Bibliothek unter dem iOS 9.1 Knoten aus.

   

   Hinweis

   Alternativ können Sie das -lz Flag Other Linker Flags dem Feld im Linking Abschnitt hinzufügen Build Settings.

Plug-In-Konfiguration für React Native niedriger als 0.60 (iOS)

Nachdem Ihr Xcode-Projekt zum Erstellen/Verknüpfen des CodePush-Plug-Ins eingerichtet wurde, müssen Sie Ihre App so konfigurieren, dass CodePush den Speicherort Ihres JS-Bundles überprüft, da es für die Synchronisierung mit Updates verantwortlich ist, die auf dem CodePush-Server veröffentlicht werden. Gehen Sie hierzu folgendermaßen vor:

1. Öffnen Sie die Datei AppDelegate.m , und fügen Sie eine import-Anweisung für die CodePush-Header hinzu:

   #import <CodePush/CodePush.h>
   

Für React Native 0.59 - 0.59.10:

2. Suchen Sie die folgende Codezeile, die die Quell-URL für Bridge für Produktionsversionen festlegt:

   return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
   

3. Ersetzen Sie sie durch diese Zeile:

   return [CodePush bundleURL];
   

Für React Native 0,58 und niedriger:

2. Suchen Sie die folgende Codezeile, die Ihr JS-Bundle für Produktionsversionen aus der App-Binärdatei lädt:

   jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
   

3. Ersetzen Sie sie durch diese Zeile:

   jsCodeLocation = [CodePush bundleURL];
   

Durch diese Änderung wird Ihre App so konfiguriert, dass immer die neueste Version des JS-Bundles Ihrer App geladen wird. Beim ersten Start entspricht dies der Datei, die mit der App kompiliert wurde. Nachdem ein Update jedoch über CodePush gepusht wurde, gibt dies den Speicherort des zuletzt installierten Updates zurück.

In der Regel möchten Sie codePush nur verwenden, um den Speicherort Ihres JS-Bundles innerhalb von Releasebuilds aufzulösen. Es wird empfohlen, das DEBUG Vorprozessormakro zu verwenden, um dynamisch zwischen der Verwendung des Packager-Servers und CodePush zu wechseln, je nachdem, ob Sie debuggen oder nicht. Dies macht es viel einfacher, sicherzustellen, dass Sie das richtige Verhalten erhalten, das Sie sich in der Produktion wünschen, während Sie zur Debugzeit weiterhin die Chrome-Dev-Tools, live reload usw. verwenden.

Für React Native 0.59 - 0.59.10:

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}

Für React Native 0,58 und niedriger:

NSURL *jsCodeLocation;

#ifdef DEBUG
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
    jsCodeLocation = [CodePush bundleURL];
#endif

Um die CodePush-Runtime darüber zu informieren, für welche Bereitstellung updates abgefragt werden soll, öffnen Sie die Info.plist-Datei des Projekts, und fügen Sie einen neuen Eintrag mit dem Namen CodePushDeploymentKeyhinzu, dessen Wert der Schlüssel der Bereitstellung ist, für die Sie diese App konfigurieren möchten (z. B. den Schlüssel für die Staging Bereitstellung für die FooBar App). Sie können diesen Wert abrufen, indem Sie in der CodePush CLI ausführen appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys und den Wert der Spalte kopieren, der Deployment Key der bereitstellung entspricht, die Sie verwenden möchten (siehe unten). Die Verwendung des Namens der Bereitstellung (z. B Staging. ) funktioniert nicht. Dieser "Anzeigename" ist nur für die authentifizierte Verwaltungsnutzung über die CLI und nicht für die öffentliche Nutzung innerhalb Ihrer App vorgesehen.

Informationen zur effektiven Nutzung der Bereitstellungen undProduction, die Staging zusammen mit Ihrer CodePush-App erstellt wurden, finden Sie in den folgenden Dokumentationen zu Tests mit mehreren Bereitstellungen, bevor Sie die Verwendung von CodePush Ihrer App tatsächlich in die Produktion verschieben.

Konfiguration von HTTP-Ausnahmedomänen (iOS)

Das CodePush-Plug-In sendet HTTPS-Anforderungen an die folgenden Domänen:

• codepush.appcenter.ms
• codepush.blob.core.windows.net
• codepushupdates.azureedge.net

Wenn Sie die HTTP-Standardsicherheitskonfiguration für eine dieser Domänen ändern möchten, definieren Sie die NSAppTransportSecurity ATS-Konfiguration in der Info.plist-Datei des Projekts:

<plist version="1.0">
  <dict>
    <!-- ...other configs... -->

    <key>NSAppTransportSecurity</key>
    <dict>
      <key>NSExceptionDomains</key>
      <dict>
        <key>codepush.appcenter.ms</key>
        <dict><!-- read the ATS Apple Docs for available options --></dict>
      </dict>
    </dict>

    <!-- ...other configs... -->
  </dict>
</plist>

Bevor Sie etwas tun, sehen Sie sich zuerst die Apple-Dokumentation an .

Einrichtung der Codesignatur (iOS)

Sie können Bundles während der Veröffentlichung selbst signieren und ihre Signaturen vor der Installation des Updates überprüfen. Weitere Informationen zur Codesignatur finden Sie im Entsprechenden Abschnitt zur Codepushdokumentation.

Um einen öffentlichen Schlüssel für die Bündelüberprüfung zu konfigurieren, müssen Sie einen Datensatz mit Info.plist dem Namen CodePushPublicKey und dem Zeichenfolgenwert des Öffentlichen Schlüsselinhalts hinzufügen. Beispiel:

<plist version="1.0">
  <dict>
    <!-- ...other configs... -->

    <key>CodePushPublicKey</key>
        <string>-----BEGIN PUBLIC KEY-----
MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANkWYydPuyOumR/sn2agNBVDnzyRpM16NAUpYPGxNgjSEp0etkDNgzzdzyvyl+OsAGBYF3jCxYOXozum+uV5hQECAwEAAQ==
-----END PUBLIC KEY-----</string>

    <!-- ...other configs... -->
  </dict>
</plist>

Android-Setup

Führen Sie die folgenden Schritte aus, um CodePush in Ihr Android-Projekt zu integrieren:

Plug-In-Installation (Android)

Plug-In-Installation und -Konfiguration für React Native Version 0.60 und höher (Android)

1. Nehmen Sie in Ihrer android/settings.gradle Datei die folgenden Ergänzungen vor:

   include ':app', ':react-native-code-push'
   project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
   

2. Fügen Sie in Ihrer android/app/build.gradle Datei die codepush.gradle Datei als zusätzliche Buildtaskdefinition hinzu:

   ...
   apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
   ...
   

3. Aktualisieren Sie die MainApplication.java Datei (oder MainApplicationReactNativeHost.java wenn Sie React Native 0.68 - 0.70 verwenden), um CodePush mithilfe der folgenden Änderungen zu verwenden:

   ...
   // 1. Import the plugin class.
   import com.microsoft.codepush.react.CodePush;
   public class MainApplication extends Application implements ReactApplication {
       private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
           ...
           // 2. Override the getJSBundleFile method to let
           // the CodePush runtime determine where to get the JS
           // bundle location from on each app start
           @Override
           protected String getJSBundleFile() {
               return CodePush.getJSBundleFile();
           }
       };
   }
   

4. Fügen Sie den Bereitstellungsschlüssel hinzu strings.xml:

   Um die CodePush-Runtime darüber zu informieren, welche Bereitstellung nach Updates abgefragt werden soll, öffnen Sie die Datei Ihrer App strings.xml , und fügen Sie eine neue Zeichenfolge mit dem Namen CodePushDeploymentKeyhinzu, deren Wert der Bereitstellung ist, für die Sie diese App konfigurieren möchten (z. B. den Schlüssel für die Staging Bereitstellung für die FooBar App). Sie können diesen Wert abrufen, indem Sie in der App Center-CLI ausführen appcenter codepush deployment list -a <ownerName>/<appName> -k (das -k Flag ist erforderlich, da Schlüssel standardmäßig nicht angezeigt werden) und den Wert der Spalte kopieren, der Key der bereitstellung entspricht, die Sie verwenden möchten (siehe unten). Die Verwendung des Namens der Bereitstellung (z. B. Staging) funktioniert nicht. Der "Anzeigename" ist nur für die authentifizierte Verwaltungsnutzung über die CLI und nicht für die öffentliche Nutzung innerhalb Ihrer App vorgesehen.

   

   Informationen zur effektiven Nutzung der Bereitstellungen undProduction, die Staging zusammen mit Ihrer CodePush-App erstellt wurden, finden Sie in den folgenden Dokumentationen zu Tests mit mehreren Bereitstellungen, bevor Sie die Verwendung von CodePush Ihrer App tatsächlich in die Produktion verschieben.

   Ihre Datei strings.xml sollte wie folgt aussehen:

    <resources>
        <string name="app_name">AppName</string>
        <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
    </resources>
   

   Hinweis

   Wenn Sie eine andere Bereitstellung dynamisch verwenden müssen, können Sie Ihren Bereitstellungsschlüssel auch mithilfe von Code-Push-Optionen im JS-Code überschreiben.*

Plug-In-Installation für React Native niedriger als 0.60 (Android)

Um so viele Entwicklereinstellungen wie möglich zu berücksichtigen, unterstützt das CodePush-Plug-In die Android-Installation über zwei Mechanismen:

1. RNPM - React Native Package Manager (RNPM) ist ein großartiges Tool, das die einfachste Installationserfahrung für React Native-Plug-Ins bietet. Wenn Sie es bereits verwenden oder verwenden möchten, empfehlen wir diesen Ansatz.

2. "Manuell" : Wenn Sie sich nicht auf zusätzliche Tools verlassen möchten oder mit ein paar zusätzlichen Installationsschritten in Ordnung sind (dies ist eine einmalige Sache), sollten Sie diesen Ansatz verwenden.

Plug-In-Installation (Android – RNPM)

1. Ab Version 0.27 von React Native rnpm link wurde bereits mit der React Native CLI zusammengeführt. Führen Sie Folgendes aus:

   react-native link react-native-code-push
   

   Wenn Ihre App eine Version von React Native niedriger als v0.27 verwendet, führen Sie den nächsten Befehl aus:

   rnpm link react-native-code-push
   

   Hinweis

   Wenn Sie RNPM noch nicht installiert haben, können Sie dies tun, indem Sie den obigen Befehl ausführen npm i -g rnpm und dann ausführen.

2. Wenn Sie RNPM >=1.6.0 verwenden, werden Sie zur Eingabe des Bereitstellungsschlüssels aufgefordert, den Sie verwenden möchten. Wenn sie noch nicht vorhanden ist, können Sie diesen Wert abrufen, indem Sie ausführen appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys, oder Sie können ihn ignorieren (indem Sie drücken <ENTER>) und ihn später hinzufügen. Für die ersten Schritte empfehlen wir die Verwendung Ihres Staging Bereitstellungsschlüssels, damit Sie CodePush ende-zu-Ende testen können.

Und das war es für die Installation mit RNPM! Fahren Sie weiter unten mit dem Abschnitt Plug-In-Konfiguration fort, um das Setup abzuschließen.

Plug-In-Installation (Android – Manuell)

1. Nehmen Sie in Ihrer android/settings.gradle Datei die folgenden Ergänzungen vor:

   include ':app', ':react-native-code-push'
   project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
   

2. Fügen Sie das :react-native-code-push Projekt in Ihrer android/app/build.gradle Datei als Kompilierzeitabhängigkeit hinzu:

   ...
   dependencies {
       ...
       compile project(':react-native-code-push')
   }
   

3. Fügen Sie in Ihrer android/app/build.gradle Datei die codepush.gradle Datei als zusätzliche Buildtaskdefinition hinzu:

   ...
   apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
   ...
   

Plug-In-Konfiguration für React Native niedriger als 0,60 (Android)

Nachdem Sie das Plug-In installiert und Ihr Android Studio-Projekt mit Gradle synchronisiert haben, müssen Sie Ihre App so konfigurieren, dass CodePush den Speicherort Ihres JS-Bundles überprüft, da sie die Verwaltung der aktuellen und aller zukünftigen Versionen "übernimmt". Gehen Sie dazu folgendermaßen vor:

Für React Native >= v0.29

Wenn Sie CodePush in React Native Anwendung integrieren, führen Sie die folgenden Schritte aus:

Aktualisieren Sie die MainApplication.java Datei so, dass CodePush verwendet wird, indem Sie die folgenden Änderungen ausführen:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }

        @Override
        protected List<ReactPackage> getPackages() {
            // 3. Instantiate an instance of the CodePush runtime and add it to the list of
            // existing packages, specifying the right deployment key. If you don't already
            // have it, you can run "appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys" to retrieve your key.
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)
            );
        }
    };
}

Führen Sie die folgenden Schritte aus, wenn Sie React Native in vorhandene native Anwendungen integrieren:

Aktualisieren Sie MyReactActivity.java die Datei (die in Ihrer App möglicherweise anders benannt werden kann), um CodePush mithilfe der folgenden Änderungen zu verwenden:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;

public class MyReactActivity extends Activity {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        mReactInstanceManager = ReactInstanceManager.builder()
                // ...
                // Add CodePush package
                .addPackage(new CodePush("deployment-key-here", getApplicationContext(), BuildConfig.DEBUG))
                // Get the JS Bundle File via CodePush
                .setJSBundleFile(CodePush.getJSBundleFile())
                // ...

                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

    ...
}

Für React Native v0.19 – v0.28

Aktualisieren Sie die MainActivity.java-Datei , um CodePush mithilfe der folgenden Änderungen zu verwenden:

...
// 1. Import the plugin class (if you used RNPM to install the plugin, this
// should already be done for you automatically so you can skip this step).
import com.microsoft.codepush.react.CodePush;

public class MainActivity extends ReactActivity {
    // 2. Override the getJSBundleFile method to let
    // the CodePush runtime determine where to get the JS
    // bundle location from on each app start
    @Override
    protected String getJSBundleFile() {
        return CodePush.getJSBundleFile();
    }

    @Override
    protected List<ReactPackage> getPackages() {
        // 3. Instantiate an instance of the CodePush runtime and add it to the list of
        // existing packages, specifying the right deployment key. If you don't already
        // have it, you can run "appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys" to retrieve your key.
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new CodePush("deployment-key-here", this, BuildConfig.DEBUG)
        );
    }

    ...
}

Hintergrund React Instanzen

Um Ihre React Native instance zu aktualisieren/neu zu starten, muss CodePush mit einem ReactInstanceHolder konfiguriert werden, bevor Sie versuchen, eine instance im Hintergrund neu zu starten. Dies geschieht in Ihrer Application Implementierung.

Für React Native >= v0.29

Aktualisieren Sie die MainApplication.java Datei so, dass CodePush verwendet wird, indem Sie die folgenden Änderungen ausführen:

...
// 1. Declare your ReactNativeHost to extend ReactInstanceHolder. ReactInstanceHolder is a subset of ReactNativeHost, so no additional implementation is needed.
import com.microsoft.codepush.react.ReactInstanceHolder;

public class MyReactNativeHost extends ReactNativeHost implements ReactInstanceHolder {
  // ... usual overrides
}

// 2. Provide your ReactNativeHost to CodePush.

public class MainApplication extends Application implements ReactApplication {

   private final MyReactNativeHost mReactNativeHost = new MyReactNativeHost(this);

   @Override
   public void onCreate() {
     CodePush.setReactInstanceHolder(mReactNativeHost);
     super.onCreate();
  }
}

Für React Native v0.19 – v0.28

Vor v0.29 hat React Native keine Abstraktion bereitgestelltReactNativeHost. Wenn Sie eine Hintergrund-instance starten, haben Sie wahrscheinlich eine eigene erstellt, die jetzt implementieren ReactInstanceHoldersollte. Sobald dies geschehen ist:

// 1. Provide your ReactInstanceHolder to CodePush.

public class MainApplication extends Application {

   @Override
   public void onCreate() {
     // ... initialize your instance holder
     CodePush.setReactInstanceHolder(myInstanceHolder);
     super.onCreate();
  }
}

Informationen zur effektiven Nutzung der Bereitstellungen undProduction, die Staging wir empfehlen, die Sie zusammen mit Ihrer CodePush-App erstellt haben, finden Sie in der Dokumentation zu Tests mit mehreren Bereitstellungen, bevor Sie die Verwendung von CodePush Ihrer App tatsächlich in die Produktion verschieben.

Einrichtung der Codesignatur (Android)

Ab CLI-Version 2.1.0 können Sie Bundles während der Veröffentlichung selbst signieren und ihre Signatur vor der Installation des Updates überprüfen. Weitere Informationen zur Codesignatur finden Sie im Entsprechenden Abschnitt zur Codepushdokumentation. Führen Sie die folgenden Schritte aus, um den öffentlichen Schlüssel für die Codesignatur zu verwenden:

Fügen Sie ein CodePushPublicKey Zeichenfolgenelement hinzu /path_to_your_app/android/app/src/main/res/values/strings.xml. Es kann wie folgt aussehen:

<resources>
   <string name="app_name">my_app</string>
   <string name="CodePushPublicKey">-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAtPSR9lkGzZ4FR0lxF+ZA
P6jJ8+Xi5L601BPN4QESoRVSrJM08roOCVrs4qoYqYJy3Of2cQWvNBEh8ti3FhHu
tiuLFpNdfzM4DjAw0Ti5hOTfTixqVBXTJPYpSjDh7K6tUvp9MV0l5q/Ps3se1vud
M1/X6g54lIX/QoEXTdMgR+SKXvlUIC13T7GkDHT6Z4RlwxkWkOmf2tGguRcEBL6j
ww7w/3g0kWILz7nNPtXyDhIB9WLH7MKSJWdVCZm+cAqabUfpCFo7sHiyHLnUxcVY
OTw3sz9ceaci7z2r8SZdsfjyjiDJrq69eWtvKVUpredy9HtyALtNuLjDITahdh8A
zwIDAQAB
-----END PUBLIC KEY-----</string>
</resources>

Für React Native <= v0.60 sollten Sie die CodePush instance konfigurieren, um diesen Parameter mithilfe eines der folgenden Ansätze zu verwenden

Verwenden des Konstruktors

new CodePush(
    "deployment-key",
    getApplicationContext(),
    BuildConfig.DEBUG,
    R.string.CodePushPublicKey)

Verwenden des Generators

new CodePushBuilder("deployment-key-here",getApplicationContext())
   .setIsDebugMode(BuildConfig.DEBUG)
   .setPublicKeyResourceDescriptor(R.string.CodePushPublicKey)
   .build()

Windows-Setup

Nachdem Sie das CodePush-Plug-In erworben haben, müssen Sie es in das Visual Studio-Projekt Ihrer React Native-App integrieren und ordnungsgemäß konfigurieren. Führen Sie dazu die folgenden Schritte aus:

Plug-In-Installation und -Konfiguration für React Native Version 0.63.6 und höher (Windows)

Plug-In-Installation (Windows-npx)

Nachdem das Plug-In heruntergeladen wurde, führen Sie im Stammverzeichnis Ihrer Anwendung aus npx react-native autolink-windows , um automatisch das C++-Projekt CodePush zur Windows-Projektmappendatei Ihrer Anwendung hinzuzufügen.

Plug-In-Konfiguration (Windows)

1. Ersetzen Sie die folgenden Dateien unter windows/<app name> durch die Dateien in der CodePushDemoAppCpp-Beispiel-App in diesem Repository unter Examples/CodePushDemoAppCpp/windows/CodePushDemoAppCpp:

   1. app.h
   2. app.cpp
   3. app.xaml

2. Ersetzen Sie in den obigen Dateien alle Vorkommen von CodePushDemoAppCpp durch den Namen Ihrer Anwendung.

3. Geben Sie die App-Version und den Bereitstellungsschlüssel Ihrer Anwendung für das configMap Objekt oben in der -Methode Ihrer App OnLaunched in App.cppein:

//...
void App::OnLaunched(activation::LaunchActivatedEventArgs const& e)
{
    winrt::Microsoft::CodePush::ReactNative::CodePushConfig::SetHost(Host());
    auto configMap{ winrt::single_threaded_map<hstring, hstring>() };
    configMap.Insert(L"appVersion", L"1.0.0");
    configMap.Insert(L"deploymentKey", L"<app deployment key>");
    winrt::Microsoft::CodePush::ReactNative::CodePushConfig::Init(configMap);
//...
}
//...

Plug-In-Installation und -Konfiguration für React Native niedriger als 0.60 (Windows)

Plug-In-Installation (Windows)

1. Öffnen Sie die Visual Studio-Projektmappe unter windows-legacy\<AppName>\<AppName>.sln in Ihrer App.

2. Klicken Sie im Fenster mit der rechten Maustaste auf den Projektmappenknoten Solution Explorer , und wählen Sie das Add -> Existing Project... Menüelement aus.

   

3. Navigieren Sie zum node_modules\react-native-code-push\windows Verzeichnis, wählen Sie die Datei aus, und klicken Sie auf OK

4. Klicken Sie zurück in mit der Solution Explorerrechten Maustaste auf den Projektknoten, der nach Ihrer App benannt ist, und wählen Sie das Add -> Reference... Menüelement aus.

   

5. Wählen Sie die Projects Registerkarte auf der linken Seite aus, überprüfen Sie das CodePush Element, und klicken Sie dann auf OK

   

Plug-In-Konfiguration (Windows)

Nach der Installation des Plug-Ins müssen Sie Ihre App so konfigurieren, dass CodePush den Speicherort Ihres JS-Bundles überprüft, da es die Verwaltung der aktuellen und aller zukünftigen Versionen "übernimmt". Aktualisieren Sie dazu die AppReactPage.cs Datei so, dass CodePush verwendet wird, indem Sie die folgenden Änderungen vornehmen:

...
// 1. Import the CodePush namespace
using CodePush.ReactNative;
...
class AppReactPage : ReactPage
{
    // 2. Declare a private instance variable for the CodePushModule instance.
    private CodePushReactPackage codePushReactPackage;

    // 3. Update the JavaScriptBundleFile property to initialize the CodePush runtime,
    // specifying the right deployment key, then use it to return the bundle URL from
    // CodePush instead of statically from the binary. If you don't already have your
    // deployment key, you can run "appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys" to retrieve it.
    public override string JavaScriptBundleFile
    {
        get
        {
            codePushReactPackage = new CodePushReactPackage("deployment-key-here", this);
            return codePushReactPackage.GetJavaScriptBundleFile();
        }
    }

    // 4. Add the codePushReactPackage instance to the list of existing packages.
    public override List<IReactPackage> Packages
    {
        get
        {
            return new List<IReactPackage>
            {
                new MainReactPackage(),
                ...
                codePushReactPackage
            };
        }
    }
    ...
}