React-Native调起iOS页面交互

接触retact-native时间不长,踩坑中,遇到的问题是:

RN页面无导航栏,而跳转的iOS原生页面需要显示导航栏。

  1. 怎么新建React-Native项目暂不描述,请自己跟教程做即可。
  2. react-native与原生交互的接口,新建了一个继承NSObject的类NativeCommon。

注意 :
需要导入#import ,并继承RCTBridgeModule

.h文件如下:

#import 
#import 
@interface NativeCommon : NSObject
@end

.m文件如下:

#import "NativeCommon.h"
#import "RootViewController.h"
#import "AppDelegate.h"
@implementation NativeCommon
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(checkIsRoot){
  dispatch_async(dispatch_get_main_queue(), ^{
    // present
    // push
}
@end
  1. 敲黑板,重点来了。RN页面调起原生页面present&push
    注意:跳转页面要在主线程实现,要不然程序会挂掉。
  • Present ViewController

这种情况下,present很好做,因为上级页面无所谓是不是UINavigationController,都可以调起presentViewController:animation:方法。

   dispatch_async(dispatch_get_main_queue(), ^{
  UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:[[RootViewController alloc]init]];
  UIViewController * topViewController = [UIApplication sharedApplication].keyWindow.rootViewController;
   [topViewController presentViewController:navigationController animated:YES completion:nil];
  });
  • Push ViewController

调用push方法的时候,必须保证上级页面和待跳转页面都是UINavigationController页面,要不然不能实现此操作。
直接建立的iOS工程,appdelegate的实现是这样的:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"TouchButton"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    UIViewController *viewController = [UIViewController new];
  viewController.view = rootView;
self.window.rootViewController = viewController;
  [self.window makeKeyAndVisible];
  return YES;
}

注意:self.window.rootViewController的页面是UIViewContrller,不是UINavigationController,这个时候该怎么办呢?

此为尝试方法,可忽略,以此记录而已。

  1. 尝试了rn隐藏导航栏的方法,无卵用,跟ios跳转没关系。
  2. 新建了一个HomeViewController,赋给self.window.rootViewController=[[UINavigationController alloc] initWithRootViewController:[HomeViewController alloc]init]
    NativeCommon类声明delegate,并在HomeViewController类实现代理,隐藏导航栏,并进行push操作。

问题来了,程序运行起来,导航栏还是存在的,push操作可以成功,只有在pop回来的时候导航栏才会消失。

正确方法:

AppDelegate.h:

@property (nonatomic, strong) UINavigationController *nav;

AppDelegate.m:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"TouchButton"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *viewController = [UIViewController new];
  viewController.view = rootView;
  self.nav = [[UINavigationController alloc] initWithRootViewController:viewController];
  self.window.rootViewController = self.nav;
  [viewController.navigationController setNavigationBarHidden:YES animated:YES];
   [self.window makeKeyAndVisible];
  return YES;
}

NativeCommon.m类里导入AppDelegate,在主线程实现:

dispatch_async(dispatch_get_main_queue(), ^{
        // push
    AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];
    RootViewController *twoVC = [[RootViewController alloc]init];
    //其中app.nav是viewcontroller根视图
    [app.nav pushViewController:twoVC animated:YES];
  });

问题完美解决。

你可能感兴趣的:(React-Native调起iOS页面交互)