Exploration du Projet modèle

Une fois cette unité terminée, vous pourrez :

• Vous repérer dans la structure de projet des applications React Native de kit de développement mobile
• Configurer votre projet pour le débogage ou la production.
• Trouver l’exemple d’application React Native de kit de développement mobile et ouvrir des bibliothèques sources sur GitHub

Lorsque vous créez une application avec forcereact, le script personnalise un modèle en fonction des arguments que vous passez. Ce modèle personnalisé constitue le projet de votre nouvelle application de kit de développement mobile. Pour React Native, le modèle définit une application conteneur native qui permet un accès direct au système d’exploitation natif. Ce conteneur fait le lien entre votre code JavaScript et l’application d’exécution Android ou iOS. Dans certains cas, vos besoins de développement nécessiteront peut-être d'ajuster ce conteneur sous-jacent. Voyons maintenant ce que contient cette application.

La partie native iOS du projet de modèle est pratiquement identique à celle d’un projet iOS natif. Il existe deux classes chargées de :

• configurer le kit de développement mobile à des fins de démarrage ;
• instancier et afficher la vue racine ;
• lancer et gérer la connexion et l’authentification.

Ouvrez <dossier_de_sortie>/ios/FirstReact.xcworkspace dans XCode. En parcourant l’espace de travail, vous pourriez avoir l’impression d’être face à un projet iOS natif. Par exemple, la classe AppDelegate inclut la plupart du code standard d’une application iOS native. Le code propre à React se trouve dans la méthode setupRootViewController de AppDelegate.

- (void)setupRootViewController
{
    NSURL *jsCodeLocation;
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" 
                                                                    fallbackResource:nil];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"SecondReact"
                                                 initialProperties:nil
                                                     launchOptions:self.launchOptions];
    rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f 
                                                      green:1.0f 
                                                       blue:1.0f 
                                                      alpha:1];
    UIViewController *rootViewController = [UIViewController new];
    rootViewController.view = rootView;
    self.window.rootViewController = rootViewController;
}

Ouvrez votre projet FirstReact/android dans Android Studio, puis accédez à la vue Projet et regardez sous FirstReact/app/app/src/main/java/com.mytrail.react. Vous y trouverez deux classes Java natives, MainActivity et MainApplication. Ces classes sont semblables à leurs équivalents natifs du kit de développement mobile.

Les classes MainApplication et MainActivity jouent le même rôle que dans les projets Android natifs :

• configurer le kit de développement mobile à des fins de démarrage ;
• instancier et afficher l’activité de démarrage ;
• lancer et gérer la connexion et l’authentification.

Les différences principales entre modèles natifs et React Native pour ces classes sont leurs classes de case. Dans les applications React Native, MainApplication étend Application, comme d’habitude, mais implémente aussi ReactApplication. MainActivity étend SalesforceReactActivity, qui étend à son tour ReactActivity. ReactApplication et ReactActivity proviennent de la bibliothèque Facebook React Native. En regardant attentivement ces implémentations, vous constaterez que la plupart des chemins dans le code conduisent finalement à un objet React Native. Ces objets comprennent des versions orientées React de nombreuses classes du kit de développement mobile, notamment SalesforceReactSDKManager.

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
   @Override
   public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
   }
   @Override
   protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      // packages.add(new MyReactNativePackage());
      packages.add(SalesforceReactSDKManager.getInstance().getReactPackage());
      return packages;
   }
   @Override
   protected String getJSMainModuleName() {
      return "index";
   }
};

@Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
   List<NativeModule> modules = new ArrayList<>();  
   modules.add(new SalesforceOauthReactBridge(reactContext));
   modules.add(new SalesforceNetReactBridge(reactContext));
   modules.add(new SmartStoreReactBridge(reactContext));
   modules.add(new MobileSyncReactBridge(reactContext));
   return modules;
}

L’exécutable React Native appelle cette méthode et d’autres méthodes de remplacement pour tisser sa magie qui exécute des méthodes JavaScript comme du code natif du Kit de développement mobile.

/*** The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
* and bundleReleaseJsAndAssets).
* These basically call `react-native bundle` with the correct arguments during the Android build
* cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
* bundle directly from the development server. Below you can see all the possible configurations
* and their defaults. If you decide to add a configuration block, make sure to add it before the
* `apply from: "../../node_modules/react-native/react.gradle"` line.
*
* project.ext.react = [
*   // the name of the generated asset file containing your JS bundle
*   bundleAssetName: "index.bundle",
*
*   // the entry file for bundle generation
*   entryFile: "index.js",
*
*   // whether to bundle JS and assets in debug mode
*   bundleInDebug: false,
*
*   // whether to bundle JS and assets in release mode
*   bundleInRelease: true,
*
*   // whether to bundle JS and assets in another build variant (if configured).
*   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
*   // The configuration property can be in the following formats
*   //         'bundleIn${productFlavor}${buildType}'
*   //         'bundleIn${buildType}'
*   // bundleInFreeDebug: true,
*   // bundleInPaidRelease: true,
*   // bundleInBeta: true,
*
*   // the root of your project, i.e. where "package.json" lives
*   root: "../../",
*
*   // where to put the JS bundle asset in debug mode
*   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
*
*   // where to put the JS bundle asset in release mode
*   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
*
*   // where to put drawable resources / React Native assets, e.g. the ones you use via
*   // require('./image.png')), in debug mode
*   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
*
*   // where to put drawable resources / React Native assets, e.g. the ones you use via
*   // require('./image.png')), in release mode*   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
*
*   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
*   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
*   // date; if you have any other folders that you want to ignore for performance reasons (gradle
*   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
*   // for example, you might want to remove it from here.
*   inputExcludes: ["android/**", "ios/**"],
*
*   // override which node gets called and with what additional arguments
*   nodeExecutableAndArgs: ["node"]
*
*   // supply additional arguments to the packager
*   extraPackagerArgs: []
* ]
*/