StoreKit SKStoreProductViewController en React Native

Answer

1. 

   davy.ai

   August 4, 2023 at 9:42 pm

   Para agregar SKStoreProductViewController a un proyecto de React Native, puedes crear un módulo nativo personalizado que pueda ser llamado desde tu código de React Native. Aquí están los pasos que puedes seguir:

   1. Crea un nuevo módulo nativo para iOS en tu proyecto de React Native. Puedes consultar la documentación oficial de React Native sobre [cómo crear un módulo nativo][2] para comenzar.

   2. En tu módulo nativo, crea un nuevo controlador de vista que presentará el SKStoreProductViewController. Dado que prefieres una solución en Objective-C, puedes crear un controlador de vista Objective-C que se ajuste al protocolo SKStoreProductViewControllerDelegate. Aquí tienes un ejemplo de un controlador de vista Objective-C que presenta el SKStoreProductViewController:

      #import <uikit uikit.h="">
      #import <storekit storekit.h="">
      
      @interface MyStoreProductViewController : UIViewController <skstoreproductviewcontrollerdelegate>
      
      @property (nonatomic, strong) NSString *iTunesID;
      
      @end
      
      @implementation MyStoreProductViewController
      
      - (void)viewDidLoad {
          [super viewDidLoad];
      
          SKStoreProductViewController *storeViewController = [[SKStoreProductViewController alloc] init];
          storeViewController.delegate = self;
      
          NSDictionary *productParameters = @{SKStoreProductParameterITunesItemIdentifier: self.iTunesID};
          [storeViewController loadProductWithParameters:productParameters completionBlock:nil];
      
          [self presentViewController:storeViewController animated:YES completion:nil];
      }
      
      - (void)productViewControllerDidFinish:(SKStoreProductViewController *)viewController {
          [self dismissViewControllerAnimated:YES completion:nil];
      }
      
      @end
      

      El controlador de vista anterior presenta un SKStoreProductViewController modal con el ID de iTunes del producto que se mostrará.

   3. En tu módulo nativo, crea un método que instancie y presente el MyStoreProductViewController. Aquí tienes un ejemplo de un método que hace esto:

      #import "MyNativeModule.h"
      #import "MyStoreProductViewController.h"
      
      @implementation MyNativeModule
      
      RCT_EXPORT_MODULE()
      
      RCT_EXPORT_METHOD(presentStoreProductViewController:(NSString *)iTunesID) {
          dispatch_async(dispatch_get_main_queue(), ^{
              UIViewController *rootViewController = [UIApplication sharedApplication].delegate.window.rootViewController;
      
              MyStoreProductViewController *storeProductViewController = [[MyStoreProductViewController alloc] init];
              storeProductViewController.iTunesID = iTunesID;
      
              [rootViewController presentViewController:storeProductViewController animated:YES completion:nil];
          });
      }
      
      @end
      

      El método anterior presenta MyStoreProductViewController como un modal en el controlador de vista raíz de tu proyecto de React Native.

   4. Finalmente, en tu código de React Native, puedes llamar al método de tu módulo nativo importándolo y llamándolo de esta manera:

      import { NativeModules } from 'react-native';
      
      const { MyNativeModule } = NativeModules;
      
      MyNativeModule.presentStoreProductViewController('123456789'); // reemplaza 123456789 con tu ID de iTunes
      

      El código anterior presentará SKStoreProductViewController como un modal cuando el usuario toque un botón “obtener aplicación”.

   Siguiendo los pasos anteriores, puedes agregar SKStoreProductViewController a un proyecto de React Native sin utilizar una biblioteca de terceros.

Comments are closed.