React Native İstemci SDK'sını Kullanmaya Başlama

Makale
06/12/2023

Önemli

Visual Studio App Center 31 Mart 2025'te kullanımdan kaldırılıyor. Tamamen kullanımdan kaldırılana kadar Visual Studio App Center'ı kullanmaya devam edebilirsiniz ancak geçiş yapmayı düşünebileceğiniz birkaç önerilen alternatif vardır.

Destek zaman çizelgeleri ve alternatifleri hakkında daha fazla bilgi edinin.

CodePush hesabınızı ayarlamak için genel amaçlı "kullanmaya başlama" yönergelerini izledikten sonra, uygulamanızın kök dizininden aşağıdaki komutu çalıştırarak CodePush'u React Native uygulamanızla tümleştirmeye başlayabilirsiniz:

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

Diğer tüm React Native eklentilerinde olduğu gibi, tümleştirme deneyimi iOS ve Android için farklıdır, bu nedenle uygulamanız için hedeflediğiniz platformlara bağlı olarak kurulum adımlarını izleyin. Her iki platformu da hedefliyorsanız her platform için ayrı CodePush uygulamaları oluşturmanız önerilir.

Diğer projelerin CodePush ile nasıl tümleştirildiğine bakmak istiyorsanız topluluk tarafından sağlanan örnek uygulamalara bakın. Ayrıca CodePush + React Native hakkında bilgi edinmek istiyorsanız Bilal Budhani ve Deepak Sisodiya tarafından oluşturulan başlangıç videolarına bakın.

Önemli

Bu kılavuzda, React Native projenizi başlatmak için komutunu kullandığınız react-native init varsayılır. Mart 2017 itibarıyla komutu create-react-native-app bir React Native projesi başlatmak için de kullanılabilir. Bu komutu kullanıyorsanız, oluşturduğunuza benzer react-native init bir proje almak için projenizin giriş dizininde komutunu çalıştırınnpm run eject.

iOS Kurulumu

CodePush eklentisini aldıktan sonra, React Native uygulamanızın Xcode projesiyle tümleştirmeniz ve doğru şekilde yapılandırmanız gerekir.

React Native 0.60 ve üzeri (iOS) için Eklenti Yükleme ve Yapılandırma

Tüm gerekli CocoaPods bağımlılıklarını yüklemek için komutunu çalıştırın cd ios && pod install && cd .. .
Dosyayı açın AppDelegate.m ve CodePush üst bilgileri için bir içeri aktarma deyimi ekleyin:
```
#import <CodePush/CodePush.h>
```
Üretim sürümleri için köprünün kaynak URL'sini ayarlayan aşağıdaki kod satırını bulun:
```
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
```
Bu satırı şu satırla değiştirin:
```
return [CodePush bundleURL];
```
Bu değişiklik, uygulamanızı her zaman uygulamanızın JS paketinin en son sürümünü yükecek şekilde yapılandırılır. İlk başlatmada bu, uygulamayla derlenen dosyaya karşılık gelir. Ancak, CodePush aracılığıyla bir güncelleştirme gönderildikten sonra bu, en son yüklenen güncelleştirmenin konumunu döndürür.

Not

yöntemi, bundleURL uygulamanızın JS paketinin adlı main.jsbundleolduğunu varsayar. Uygulamanızı farklı bir dosya adı kullanacak şekilde yapılandırdıysanız, varsayılan davranışın bundleURLForResource: üzerine yazmak için yöntemini (uzantıyı .jsbundle kullandığınız varsayılır) veya bundleURLForResource:withExtension: yöntemini çağırın.

Genellikle yalnızca sürüm derlemeleri içindeki JS paket konumunuzu çözümlemek için CodePush kullanmak istersiniz. Hata ayıklayıp ayıklamadığınıza DEBUG bağlı olarak paketleyici sunucusunu ve CodePush'ı kullanma arasında dinamik olarak geçiş yapmak için işlemci öncesi makroyu kullanmanızı öneririz. Bu, hata ayıklama zamanında Chrome Geliştirme Araçları, canlı yeniden yükleme vb. kullanırken üretimde istediğiniz doğru davranışı elde etmek için çok daha basit hale getirir.

Yönteminiz sourceURLForBridge şu şekilde görünmelidir:
```
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}
```
Dağıtım anahtarını öğesine Info.plistekleyin: CodePush çalışma zamanının güncelleştirmeleri sorgulaması gereken dağıtımı bilmesini sağlamak için uygulamanızın Info.plist dosyasını açın ve değeri bu uygulamayı yapılandırmak istediğiniz dağıtımın anahtarı olan (uygulama dağıtımının FooBar anahtarı Staging gibi) adlı CodePushDeploymentKeyyeni bir giriş ekleyin. Uygulamanın AppCenter panonuzdaKimlik Arabirimi'ne giderek veya CodePush CLI ile çalıştırarak appcenter codepush deployment list --app <ownerName>/<appName> -k ( -k anahtarlar varsayılan olarak görüntülenmediğinden bayrağı gereklidir) ve kullanmak istediğiniz dağıtıma karşılık gelen sütunun Deployment Key değerini kopyalayarak bu değeri alabilirsiniz (aşağıya bakın). Dağıtımın adını (Hazırlama gibi) kullanmak işe yaramaz. Bu "kolay ad" yalnızca CLI'dan kimliği doğrulanmış yönetim kullanımına yöneliktir, uygulamanızda genel kullanıma yönelik değildir.

CodePush uygulamanızla birlikte oluşturulan ve Production dağıtımlarını etkili bir şekilde kullanmak Staging için uygulamanızın CodePush kullanımını üretime taşımadan önce aşağıdaki çoklu dağıtım testi belgelerine bakın.

Not

Farklı bir dağıtımı dinamik olarak kullanmanız gerekiyorsa, Kod Gönderme seçeneklerini kullanarak JS kodundaki dağıtım anahtarınızı da geçersiz kılabilirsiniz*

0,60'tan daha düşük React Native için Eklenti Yüklemesi (iOS)

CodePush eklentisi, mümkün olduğunca çok geliştirici tercihine uyum sağlamak için üç mekanizma aracılığıyla iOS yüklemesini destekler:

RNPM - React Native Paket Yöneticisi (RNPM), React Native eklentileri için mümkün olan en basit yükleme deneyimini sağlayan harika bir araçtır. Zaten kullanıyorsanız veya kullanmak istiyorsanız bu yaklaşımı öneririz.
CocoaPods - React Native ekleyen yerel bir iOS uygulaması oluşturuyorsanız veya CocoaPods kullanmayı tercih ediyorsanız eklentimizin bir parçası olarak sunduğumuz Podspec dosyasını kullanmanızı öneririz.
"El ile" - Ek araçlara bağımlı olmak istemiyorsanız veya birkaç ek yükleme adımında sorun yoksa (tek seferlik bir işlemdir), bu yaklaşımla devam edin.

Eklenti Yüklemesi (iOS - RNPM)

React Native rnpm link v0.27 itibarıyla, React Native CLI ile zaten birleştirilmiştir. Çalıştır:
```
react-native link react-native-code-push
```
Uygulamanız v0.27'den daha düşük React Native sürümü kullanıyorsa aşağıdaki komutu yürütebilirsiniz:
```
 rnpm link react-native-code-push
```
Not

RNPM'yi henüz yüklemediyseniz, yukarıdaki komutu çalıştırıp npm i -g rnpm yürüterek bunu yapabilirsiniz. RNPM zaten yüklüyse, bu tek adım yüklemeden yararlanmak için v1.9.0+ sürümüne sahip olduğunuzdan emin olun.
Kullanmak istediğiniz dağıtım anahtarı istenir. Henüz sahip değilseniz, komutunu çalıştırarak appcenter codepush deployment list -a <ownerName>/<appName> --displayKeysbu değeri alabilir veya yoksaymayı seçebilirsiniz (tuşuna basarak <ENTER>) ve daha sonra ekleyebilirsiniz. Başlamak için CodePush uçtan uca test edebilmeniz için dağıtım anahtarınızı Staging kullanmanızı öneririz.

Eklenti Yüklemesi (iOS - CocoaPods)

NPM'nin modülleri yüklediği yolu işaret ederek React Native ve CodePush eklenti bağımlılıklarını öğesine Podfileekleyin

# 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'

Not

Bağımlılıkların dosya yolları uygulamanızın Podfile konumuna göre olmalıdır.

Not

Projenin JWT kitaplığı sürüm 3.0.x veya üzeri olmalıdır

pod install komutunu çalıştırın

Not

CodePush.podspec, pod'a bağlıdır React ve bu nedenle uygulamanızın oluşturulduğu React Native sürümünü doğru bir şekilde kullanabilmesini sağlamak için, React Native tümleştirme belgelerinde açıklandığı gibi uygulamanızın Podfile sürümünde bağımlılığı tanımladığınızdan React emin olun.

Eklenti Yüklemesi (iOS - El ile)

Uygulamanızın Xcode projesini açma
CodePush.xcodeproj Dosyayı dizin içinde node_modules/react-native-code-push/ios (veya node_modules/react-native-code-push =1.7.3-beta yüklemeler için<) bulun ve Xcode'da düğüme Libraries sürükleyin
Xcode'da proje düğümünü seçin ve proje yapılandırmanızın "Derleme Aşamaları" sekmesini seçin.
Libraries/CodePush.xcodeproj/Products öğesini projenizin "Derleme Aşamaları" yapılandırmasının "İkiliYi Kitaplıklarla Bağla" bölümüne sürükleyinlibCodePush.a.
"İkiliYi Kitaplıklarla Bağla" listesinin altındaki artı işaretine tıklayın ve düğümün libz.tbdiOS 9.1 altındaki kitaplığı seçin.

Not

Alternatif olarak, isterseniz bayrağını -lz öğesinin Other Linker Flags bölümündeki Build Settingsalana Linking ekleyebilirsiniz.

0,60'tan daha düşük React Native için Eklenti Yapılandırması (iOS)

Not

RNPM kullandıysanız veya react-native link eklentiyi otomatik olarak bağlamak için bu adımlar sizin için zaten yapılmıştır, bu nedenle bu bölümü atlayabilirsiniz.

Xcode projeniz CodePush eklentisini derlemek/bağlamak üzere ayarlandıktan sonra, uygulamanızı CodePush paketinizin konumu için CodePush'ı denetleyecek şekilde yapılandırmanız gerekir, çünkü bunu CodePush sunucusuna yayımlanan güncelleştirmelerle eşitlemekten sorumludur. Bunu yapmak için şu adımları uygulayın:

AppDelegate.m dosyasını açın ve CodePush üst bilgileri için bir içeri aktarma deyimi ekleyin:
```
#import <CodePush/CodePush.h>
```

React Native 0.59 - 0.59.10 için:

Üretim sürümleri için köprünün kaynak URL'sini ayarlayan aşağıdaki kod satırını bulun:
```
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
```
Bu satırı şu satırla değiştirin:
```
return [CodePush bundleURL];
```

React Native 0,58 ve altı için:

Üretim sürümleri için uygulama ikili dosyasından JS Paketinizi yükleyen aşağıdaki kod satırını bulun:

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

Bu satırı şu satırla değiştirin:
```
jsCodeLocation = [CodePush bundleURL];
```

Bu değişiklik, uygulamanızı her zaman uygulamanızın JS paketinin en son sürümünü yükecek şekilde yapılandırılır. İlk başlatmada bu, uygulamayla derlenen dosyaya karşılık gelir. Ancak, CodePush aracılığıyla bir güncelleştirme gönderildikten sonra bu, en son yüklenen güncelleştirmenin konumunu döndürür.

Not

yöntemi, bundleURL uygulamanızın JS paketinin adlı main.jsbundleolduğunu varsayar. Uygulamanızı farklı bir dosya adı kullanacak şekilde yapılandırdıysanız, varsayılan davranışın bundleURLForResource: üzerine yazmak için yöntemini (uzantıyı .jsbundle kullandığınız varsayılır) veya bundleURLForResource:withExtension: yöntemini çağırın.

Genellikle yalnızca sürüm derlemeleri içindeki JS paket konumunuzu çözümlemek için CodePush kullanmak istersiniz. Hata ayıklayıp ayıklamadığınıza DEBUG bağlı olarak paketleyici sunucusunu ve CodePush'ı kullanma arasında dinamik olarak geçiş yapmak için işlemci öncesi makroyu kullanmanızı öneririz. Bu, hata ayıklama zamanında Chrome Geliştirme Araçları, canlı yeniden yükleme vb. kullanırken üretimde istediğiniz doğru davranışı elde etmek için çok daha basit hale getirir.

React Native 0.59 - 0.59.10 için:

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

React Native 0,58 ve altı için:

NSURL *jsCodeLocation;

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

CodePush çalışma zamanının güncelleştirmeleri sorgulaması gereken dağıtımı bilmesini sağlamak için projenin Info.plist dosyasını açın ve değeri bu uygulamayı yapılandırmak istediğiniz dağıtımın anahtarı olan (uygulama dağıtımının FooBar anahtarı Staging gibi) adlı CodePushDeploymentKeyyeni bir giriş ekleyin. CodePush CLI'de çalıştırarak appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys ve kullanmak istediğiniz dağıtıma karşılık gelen sütunun Deployment Key değerini kopyalayarak bu değeri alabilirsiniz (aşağıya bakın). Dağıtımın adını (gibi Staging) kullanmak işe yaramaz. Bu "kolay ad" yalnızca CLI'dan kimliği doğrulanmış yönetim kullanımına yöneliktir, uygulamanızda genel kullanıma yönelik değildir.

Hazırlama Anahtarı

CodePush uygulamanızla birlikte oluşturulan ve Production dağıtımlarını etkili bir şekilde kullanmak Staging için uygulamanızın CodePush kullanımını üretime taşımadan önce aşağıdaki çoklu dağıtım testi belgelerine bakın.

HTTP özel durum etki alanları yapılandırması (iOS)

CodePush eklentisi aşağıdaki etki alanlarına HTTPS isteklerinde bulunur:

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

Bu etki alanlarından herhangi biri için varsayılan HTTP güvenlik yapılandırmasını değiştirmek istiyorsanız, projenin Info.plist dosyasında (ATS) yapılandırmasını tanımlayınNSAppTransportSecurity:

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

Bir şey yapmadan önce Apple belgelerine bakın.

Kod İmzalama kurulumu (iOS)

Sürüm sırasında paketleri otomatik olarak imzalayabilir ve güncelleştirme yüklemeden önce imzalarını doğrulayabilirsiniz. Kod İmzalama hakkında daha fazla bilgi için ilgili kod gönderme belgeleri bölümüne bakın.

Paket doğrulaması için Ortak Anahtar yapılandırmak için, ortak anahtar içeriğinin adı CodePushPublicKey ve dize değeriyle bir kayıt Info.plist eklemeniz gerekir. Örnek:

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

CodePush'ı Android projenizle tümleştirmek için aşağıdaki adımları uygulayın:

Eklenti Yüklemesi (Android)

React Native 0.60 ve üzeri sürümler için Eklenti Yükleme ve Yapılandırma (Android)

Dosyanızda android/settings.gradle aşağıdaki eklemeleri yapın:

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

Dosyanıza android/app/build.gradle , dosyayı ek derleme görevi tanımı olarak ekleyin codepush.gradle :
```
...
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...
```

MainApplication.java CodePush'ı kullanmak için (veya MainApplicationReactNativeHost.java React Native 0.68 - 0.70) dosyasını aşağıdaki değişikliklerle güncelleştirin:

...
// 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();
        }
    };
}

Dağıtım anahtarını içine strings.xmlekleyin:

CodePush çalışma zamanının güncelleştirmeler için hangi dağıtımı sorgulaması gerektiğini bilmesini sağlamak için uygulamanızın strings.xml dosyasını açın ve değeri bu uygulamayı yapılandırmak istediğiniz dağıtımın anahtarı olan adlı yeni bir dize CodePushDeploymentKeyekleyin (uygulamanın dağıtımının FooBar anahtarı Staging gibi). App Center CLI'da çalıştırarak appcenter codepush deployment list -a <ownerName>/<appName> -k ( -k anahtarlar varsayılan olarak görüntülenmediğinden bayrak gereklidir) ve kullanmak istediğiniz dağıtıma karşılık gelen sütunun Key değerini kopyalayarak bu değeri alabilirsiniz (aşağıya bakın). Dağıtımın adını (Hazırlama gibi) kullanmak işe yaramaz. "Kolay ad", yalnızca CLI'dan kimliği doğrulanmış yönetim kullanımına yöneliktir, uygulamanızda genel kullanıma yönelik değildir.

CodePush uygulamanızla birlikte oluşturulan ve Production dağıtımlarını etkili bir şekilde kullanmak Staging için uygulamanızın CodePush kullanımını üretime taşımadan önce aşağıdaki çoklu dağıtım testi belgelerine bakın.

Dosyanız strings.xml şu şekilde görünmelidir:
```
 <resources>
     <string name="app_name">AppName</string>
     <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
 </resources>
```
Not

Farklı bir dağıtımı dinamik olarak kullanmanız gerekiyorsa, Kod Gönderme seçeneklerini kullanarak JS kodundaki dağıtım anahtarınızı da geçersiz kılabilirsiniz*

0.60'tan daha düşük React Native için Eklenti Yüklemesi (Android)

CodePush eklentisi, mümkün olduğunca çok geliştirici tercihine uyum sağlamak için iki mekanizma aracılığıyla Android yüklemesini destekler:

RNPM - React Native Paket Yöneticisi (RNPM), React Native eklentileri için mümkün olan en basit yükleme deneyimini sağlayan harika bir araçtır. Zaten kullanıyorsanız veya kullanmak istiyorsanız bu yaklaşımı öneririz.
"El ile" - Ek araçlara bağımlı olmak istemiyorsanız veya birkaç ek yükleme adımında sorun yoksa (tek seferlik bir işlemdir), bu yaklaşımla devam edin.

Not

React Native deposundaki bir kod değişikliği nedeniyle, yüklü React Native sürümünüz 0,29 ile 0,32 arasında değişiyorsa, doğru şekilde ayarlamak için el ile adımların izlenmesini öneririz.

Eklenti Yüklemesi (Android - RNPM)

React Native rnpm link v0.27 itibarıyla, React Native CLI ile zaten birleştirilmiştir. Çalıştır:
```
react-native link react-native-code-push
```
Uygulamanız v0.27'den daha düşük React Native sürümü kullanıyorsa, sonraki komutu çalıştırın:
```
rnpm link react-native-code-push
```
Not

RNPM'yi henüz yüklemediyseniz, yukarıdaki komutu çalıştırıp npm i -g rnpm yürüterek bunu yapabilirsiniz.
RNPM >=1.6.0 kullanıyorsanız, kullanmak istediğiniz dağıtım anahtarı istenir. Henüz sahip değilseniz, komutunu çalıştırarak appcenter codepush deployment list -a <ownerName>/<appName> --displayKeysbu değeri alabilir veya yoksaymayı seçebilirsiniz (tuşuna basarak <ENTER>) ve daha sonra ekleyebilirsiniz. Başlamak için CodePush uçtan uca test edebilmeniz için dağıtım anahtarınızı Staging kullanmanızı öneririz.

RNPM kullanarak kurulum için de bu kadar! Kurulumu tamamlamak için aşağıdaki Eklenti Yapılandırması bölümüne geçin.

Eklenti Yüklemesi (Android - El ile)

Dosyanızda android/settings.gradle aşağıdaki eklemeleri yapın:

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

Dosyanıza android/app/build.gradle projeyi derleme zamanı bağımlılığı olarak ekleyin :react-native-code-push :
```
...
dependencies {
    ...
    compile project(':react-native-code-push')
}
```
Dosyanıza android/app/build.gradle , dosyayı ek derleme görevi tanımı olarak ekleyin codepush.gradle :
```
...
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...
```

0,60'tan daha düşük React Native için Eklenti Yapılandırması (Android)

Not

RNPM kullandıysanız veya react-native link eklentiyi otomatik olarak bağlamak için bu adımlar sizin için zaten yapılmıştır, bu nedenle bu bölümü atlayabilirsiniz.

Eklentiyi yükledikten ve Android Studio projenizi Gradle ile eşitledikten sonra uygulamanızı CodePush'u JS paketinizin konumu için denetleyecek şekilde yapılandırmanız gerekir, çünkü geçerli ve gelecekteki tüm sürümlerin yönetimini "kontrol edecektir". Bunu yapmak için:

React Native >= v0.29 için

CodePush'ı React Native uygulamayla tümleştiriyorsanız aşağıdaki adımları uygulayın:

MainApplication.java Dosyayı aşağıdaki değişikliklerle CodePush kullanacak şekilde güncelleştirin:

...
// 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)
            );
        }
    };
}

React Native mevcut yerel uygulamayla tümleştiriyorsanız aşağıdaki adımları uygulayın:

Aşağıdaki değişikliklerle CodePush kullanmak için dosyasını güncelleştirin MyReactActivity.java (uygulamanızda farklı adlandırılmış olabilir):

...
// 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);
    }

    ...
}

React Native v0.19 - v0.28 için

MainActivity.java dosyasını aşağıdaki değişikliklerle CodePush kullanacak şekilde güncelleştirin:

...
// 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)
        );
    }

    ...
}

Arka Plan React Örnekleri

Not

Bu bölüm yalnızca bir React Native örneğini (örneğin, yerel bir anında iletme bildirimi alıcısından) olmadan Activityaçıkça başlatıyorsanız gereklidir. Bu durumlarda CodePush'a React Native örneğinizin nasıl bulunacağı anlatılmalıdır.

React Native örneğinizi güncelleştirmek/yeniden başlatmak için, arka planda bir ReactInstanceHolder örneği yeniden başlatmaya çalışmadan önce CodePush ile yapılandırılmalıdır. Bu, uygulamanızda Application gerçekleştirilir.

React Native >= v0.29 için

MainApplication.java Dosyayı aşağıdaki değişikliklerle CodePush kullanacak şekilde güncelleştirin:

...
// 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();
  }
}

React Native v0.19 - v0.28 için

v0.29'da React Native soyutlama ReactNativeHost sağlamamıştı. Bir arka plan örneği başlatıyorsanız, büyük olasılıkla kendi örneğinizi oluşturdunuz ve bunu şimdi uygulamanız ReactInstanceHoldergerekir. Bu işlem tamamlandıktan sonra:

// 1. Provide your ReactInstanceHolder to CodePush.

public class MainApplication extends Application {

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

CodePush uygulamanızla birlikte oluşturmanızı önerdiğimiz ve Production dağıtımlarını etkili bir şekilde kullanmak Staging için uygulamanızın CodePush kullanımını üretime taşımadan önce aşağıdaki çoklu dağıtım testi belgelerine bakın.

Kod İmzalama kurulumu (Android)

CLI sürüm 2.1.0'dan başlayarak, sürüm sırasında paketleri otomatik olarak imzalayabilir ve güncelleştirmeyi yüklemeden önce imzasını doğrulayabilirsiniz. Kod İmzalama hakkında daha fazla bilgi için ilgili kod gönderme belgeleri bölümüne bakın. Kod İmzalama için Ortak Anahtarı kullanmak için aşağıdaki adımları uygulayın:

öğesine /path_to_your_app/android/app/src/main/res/values/strings.xmlbir CodePushPublicKey dize öğesi ekleyin. Şu şekilde görünebilir:

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

React Native <= v0.60 için örneği aşağıdaki yaklaşımlardan birini kullanarak bu parametreyi kullanacak şekilde yapılandırmanız `CodePush` gerekir

Oluşturucu kullanma

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

Oluşturucu kullanma

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

Windows Kurulumu

CodePush eklentisini aldıktan sonra, React Native uygulamanızın Visual Studio projesiyle tümleştirmeniz ve doğru şekilde yapılandırmanız gerekir. Bunu yapmak için aşağıdaki adımları uygulayın:

React Native sürüm 0.63.6 ve üzeri için Eklenti Yükleme ve Yapılandırma (Windows)

Eklenti Yüklemesi (Windows-npx)

Eklenti indirildikten sonra uygulamanızın kök dizininde komutunu çalıştırarak npx react-native autolink-windows CodePush c++ projesini uygulamanızın Windows çözüm dosyasına otomatik olarak ekleyin.

Eklenti Yapılandırması (Windows)

konumunda windows/<app name> bulunan aşağıdaki dosyaları, konumunda bulunan Examples/CodePushDemoAppCpp/windows/CodePushDemoAppCppbu depodaki CodePushDemoAppCpp örnek uygulamasındakilerle değiştirin:
1. app.h
2. app.cpp
3. Xaml
Yukarıdaki dosyalarda, herhangi bir örneğini CodePushDemoAppCpp uygulamanızın adıyla değiştirin
Uygulamanızın uygulama sürümünü ve dağıtım anahtarını uygulamasında uygulamanızın configMapOnLaunched yönteminin App.cppen üstündeki nesneye girin:

//...
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);
//...
}
//...

0,60'tan düşük React Native için Eklenti Yükleme ve Yapılandırma (Windows)

Eklenti Yüklemesi (Windows)

Uygulamanızın içinde bulunan windows-legacy\<AppName>\<AppName>.sln Visual Studio çözümünü açın
Pencerede çözüm düğümüne Solution Explorer sağ tıklayın ve menü öğesini seçin Add -> Existing Project...
Dizine node_modules\react-native-code-push\windows göz atın, dosyayı seçin ve OK
öğesine Solution Explorergeri dönün, uygulamanızın adını taşıyan proje düğümüne Add -> Reference... sağ tıklayın ve menü öğesini seçin
Sol taraftaki sekmeyi Projects seçin, öğeyi CodePush denetleyin ve ardından OK

Eklenti Yapılandırması (Windows)

Eklentiyi yükledikten sonra, uygulamanızı JS paketinizin konumu için CodePush'u denetleyecek şekilde yapılandırmanız gerekir, çünkü geçerli ve gelecekteki tüm sürümlerin yönetilmesini "kontrol eder". Bunu yapmak için dosyayı aşağıdaki değişikliklerle CodePush kullanacak şekilde güncelleştirin AppReactPage.cs :

...
// 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
            };
        }
    }
    ...
}

Aracılığıyla paylaş

React Native İstemci SDK'sını Kullanmaya Başlama

iOS Kurulumu

React Native 0.60 ve üzeri (iOS) için Eklenti Yükleme ve Yapılandırma

0,60'tan daha düşük React Native için Eklenti Yüklemesi (iOS)

Eklenti Yüklemesi (iOS - RNPM)

Eklenti Yüklemesi (iOS - CocoaPods)

Eklenti Yüklemesi (iOS - El ile)

0,60'tan daha düşük React Native için Eklenti Yapılandırması (iOS)

HTTP özel durum etki alanları yapılandırması (iOS)

Kod İmzalama kurulumu (iOS)

Android Kurulumu

Eklenti Yüklemesi (Android)

React Native 0.60 ve üzeri sürümler için Eklenti Yükleme ve Yapılandırma (Android)

0.60'tan daha düşük React Native için Eklenti Yüklemesi (Android)

Eklenti Yüklemesi (Android - RNPM)

Eklenti Yüklemesi (Android - El ile)

0,60'tan daha düşük React Native için Eklenti Yapılandırması (Android)

Arka Plan React Örnekleri

Kod İmzalama kurulumu (Android)

React Native <= v0.60 için örneği aşağıdaki yaklaşımlardan birini kullanarak bu parametreyi kullanacak şekilde yapılandırmanız `CodePush` gerekir

Oluşturucu kullanma

Oluşturucu kullanma

Windows Kurulumu

React Native sürüm 0.63.6 ve üzeri için Eklenti Yükleme ve Yapılandırma (Windows)

Eklenti Yüklemesi (Windows-npx)

Eklenti Yapılandırması (Windows)

0,60'tan düşük React Native için Eklenti Yükleme ve Yapılandırma (Windows)

Eklenti Yüklemesi (Windows)

Eklenti Yapılandırması (Windows)

Ek kaynaklar

Aracılığıyla paylaş

React Native İstemci SDK'sını Kullanmaya Başlama

iOS Kurulumu

React Native 0.60 ve üzeri (iOS) için Eklenti Yükleme ve Yapılandırma

0,60'tan daha düşük React Native için Eklenti Yüklemesi (iOS)

Eklenti Yüklemesi (iOS - RNPM)

Eklenti Yüklemesi (iOS - CocoaPods)

Eklenti Yüklemesi (iOS - El ile)

0,60'tan daha düşük React Native için Eklenti Yapılandırması (iOS)

HTTP özel durum etki alanları yapılandırması (iOS)

Kod İmzalama kurulumu (iOS)

Android Kurulumu

Eklenti Yüklemesi (Android)

React Native 0.60 ve üzeri sürümler için Eklenti Yükleme ve Yapılandırma (Android)

0.60'tan daha düşük React Native için Eklenti Yüklemesi (Android)

Eklenti Yüklemesi (Android - RNPM)

Eklenti Yüklemesi (Android - El ile)

0,60'tan daha düşük React Native için Eklenti Yapılandırması (Android)

Arka Plan React Örnekleri

Kod İmzalama kurulumu (Android)

React Native <= v0.60 için örneği aşağıdaki yaklaşımlardan birini kullanarak bu parametreyi kullanacak şekilde yapılandırmanız CodePush gerekir

Oluşturucu kullanma

Oluşturucu kullanma

Windows Kurulumu

React Native sürüm 0.63.6 ve üzeri için Eklenti Yükleme ve Yapılandırma (Windows)

Eklenti Yüklemesi (Windows-npx)

Eklenti Yapılandırması (Windows)

0,60'tan düşük React Native için Eklenti Yükleme ve Yapılandırma (Windows)

Eklenti Yüklemesi (Windows)

Eklenti Yapılandırması (Windows)

Ek kaynaklar

React Native <= v0.60 için örneği aşağıdaki yaklaşımlardan birini kullanarak bu parametreyi kullanacak şekilde yapılandırmanız `CodePush` gerekir