RN <~> iOS 互相调用UI

首先本文章是在有导航条的基础上进行跳转的
再者网络上的姿势也比较多,本文不能满足你的话就请在网上寻找吧

在 iOS 中创建桥接文件

RNiOSBridgeModule


#import 

#import 

@interface RNiOSBridgeModule : NSObject

@end


#import "RNiOSBridgeModule.h"

@implementation RNiOSBridgeModule


RCT_EXPORT_MODULE();


RCT_EXPORT_METHOD(jumpNextViewiOSController){
  NSLog(@"jumpNextViewController");
  
//发送通知,在APPDelegate 里面接收并跳转
  dispatch_sync(dispatch_get_main_queue(), ^{
    [[NSNotificationCenter defaultCenter] postNotificationName:@"jumpNextiOSVC" object:nil];
    
  });
  
}

AppDelegate

@interface AppDelegate ()

@property (nonatomic,strong)UINavigationController *navigationCtrl;

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

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

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"RNAndiOSUICall"
                                               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 *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
//  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  
  
  
  //一般项目都是使用 UINavigationController  所以,我们也需要将项目用UINavigationController 来管理,添加默认的UINavigationController  导航条可以隐藏
  //这样跳转页面直接push即可
  _navigationCtrl=[[UINavigationController alloc]initWithRootViewController:rootViewController];
  _navigationCtrl.navigationBarHidden = YES;
  
  self.window.rootViewController = _navigationCtrl;
  
  [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(jumpiOSVC) name:@"jumpNextiOSVC" object:nil];

  
  
  return YES;
}

- (void)jumpiOSVC {
  NSLog(@"可以进行跳转了");
  
  [self.navigationCtrl pushViewController:[iOSViewController new] animated:YES];

  
}

RN


import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    NativeModules
} from 'react-native';
let RNiOSBridge = NativeModules.RNiOSBridgeModule;

export default class RNAndiOSUICall extends Component {
  render() {
    return (
      
        
          Welcome to React Native!我是React Native界面
        

        {

          RNiOSBridge.jumpNextViewiOSController();
        }}>

          点击跳转到 iOS 的原生界面

        

      
    );
  }
}

在 iOS页面跳转到RN页面相对简单,在回调中即可实现(借用上篇文章代码)

[self.bridge.eventDispatcher sendAppEventWithName:@"getSelectDate" body:@{@"SelectDate":str_date}];
 componentDidMount (){
        
this.listener=NativeAppEventEmitter.addListener('getSelectDate',(data)=>{
            console.log('data'+JSON.stringify(data));
            console.log('selectDate:'+data.SelectDate);

在此处实现RN的跳转事件即可
        })

    }
    componentWillUnmount(){
        this.listener.remove();
    }

你可能感兴趣的:(RN <~> iOS 互相调用UI)