Comment présenter un UIViewController natif dans React Native ? (On ne peut pas utiliser un simple UIView)

Question

J'essaie d'utiliser ABNewPersonViewController dans mon application React Native. Voici comment il est utilisé en Objective-C :

ABNewPersonViewController *picker = [[ABNewPersonViewController alloc] init];
picker.newPersonViewDelegate = self;

UINavigationController *navigation = [[UINavigationController alloc] initWithRootViewController:picker];
[self presentViewController:navigation animated:NO completion:nil];

Comment puis-je faire cela dans React Native ? Je ne peux pas écrire un composant d'interface utilisateur ponté car il s'agit d'un UIViewController et non d'un UIView.

S'il vous plaît, ne me dites pas de le réimplémenter.

Answer 1

Voici ce qui a fini par fonctionner pour moi.

CreateContact.h :

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import <AddressBook/AddressBook.h>
#import <AddressBookUI/AddressBookUI.h>
#import "RCTBridgeModule.h"

@interface CreateContact : NSObject <ABNewPersonViewControllerDelegate, RCTBridgeModule>

@end

CreateContact.m :

#import "CreateContact.h"
#import "AppDelegate.h"

@implementation CreateContact

RCT_EXPORT_MODULE(CreateContact);

RCT_EXPORT_METHOD(presentContact) {

    dispatch_async(dispatch_get_main_queue(), ^{
        ABNewPersonViewController *picker = [[ABNewPersonViewController alloc] init];
        picker.newPersonViewDelegate = self;
        UINavigationController* contactNavigator = [[UINavigationController alloc] initWithRootViewController:picker];
        AppDelegate *delegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
        [delegate.window.rootViewController presentViewController:contactNavigator animated:NO completion:nil];
    });
}

- (void)newPersonViewController:(ABNewPersonViewController *)newPersonViewController didCompleteWithNewPerson:(ABRecordRef)person
{
    [newPersonViewController dismissViewControllerAnimated:YES completion:nil];
}
@end

Ce tutoriel est plus détaillé : http://moduscreate.com/leverage-existing-ios-views-react-native-app/

Je mettrai à jour les informations au fur et à mesure que je mettrai en place la meilleure façon de communiquer les informations à RN.

Answer 2

Vous voulez mettre en œuvre un composant d'interface utilisateur ponté qui monte une UIView vide et qui est principalement responsable de la présentation de votre UIViewController. L'exemple le plus simple de cette technique se trouve dans RCTModalHostView ; consultez le code source .

Notamment, React Native définit une catégorie sur UIView qui ajoute une propriété appelée reactViewController qui remonte la hiérarchie des vues pour trouver le UIViewController le plus proche. Utilisez ce UIViewController pour présenter votre contrôleur de vue personnalisé :

- (void)didMoveToWindow
{
  [super didMoveToWindow];

  if (!_isPresented && self.window) {
    [self.reactViewController presentViewController:_customViewController
                                           animated:NO
                                         completion:nil];
    _isPresented = YES;
  }
}