RN-组件的简单使用RN知识iOS集成ReactNavite

RN <~> iOS 互相调用UI

2017-05-08  本文已影响107人  精神病患者link常

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

在 iOS 中创建桥接文件

RNiOSBridgeModule


#import <Foundation/Foundation.h>

#import <React/RCTBridgeModule.h>

@interface RNiOSBridgeModule : NSObject<RCTBridgeModule>

@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 (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!我是React Native界面
        </Text>

        <TouchableOpacity onPress={()=>{

          RNiOSBridge.jumpNextViewiOSController();
        }}>

          <Text>点击跳转到 iOS 的原生界面</Text>

        </TouchableOpacity>

      </View>
    );
  }
}

在 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();
    }
上一篇 下一篇

猜你喜欢

热点阅读