React-Native iOS - 如何使用按钮按钮从React-Native视图导航到非React-Native视图（本机iOS视图控制器）？

Question

RN doco和其他示例显示如何从本机iOS视图控制器启动React-Native视图，但不是相反。有人可以解释我如何做到这一点？

Answer 1

我能弄明白这一点。在我的情况下，我使用我自己的Swift本地视图控制器来使用Obj-C基础项目（这是默认的RN）。我的解决方案是在这里，以防止其他人出现：

简而言之，答案是使用RTCBridge模块来允许RN JavaScript调用本机iOS方法。

---

这里是部件的轮廓，依次执行：

1. AppDelegate.h/.M - 初始化RN的初始RN视图的javascript索引文件，还设置一个方法来用标准实施一个正常的UIViewController
2. MyProject的桥接-Header.h - - 交换根视图控制器到本地视图控制器（该方法将从RTCBridge模块调用
3. MyViewController.swift。提供Obj- C < - >雨燕通信
4. ChangeViewBridge.h/.M - 这提供了绑定，让你打电话从RN机iOS方法的JavaScript
5. index.ios.js - 初始化您的自定义RCTBridge模块，并调用绑定的方法按下按钮切换到您的本地视图。

---

AppDelegate.h

#import <UIKit/UIKit.h> 

@interface AppDelegate : UIResponder <UIApplicationDelegate, IXUAFDelegate> { 
    NSDictionary *options; 
    UIViewController *viewController; 
} 

@property (nonatomic, strong) UIWindow *window; 

- (void) setInitialViewController; 
- (void) goToRegisterView; // called from the RCTBridge module 

@end 

---

AppDelegate.m

#import "AppDelegate.h" 
#import <React/RCTBundleURLProvider.h> 
#import <React/RCTRootView.h> 
#import "FidoTestProject-Swift.h" // Xcode generated import to reference MyViewController.swift from Obj-C 

@implementation AppDelegate 

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{ 
    options = launchOptions; 
    [self setInitialViewController]; 
    return YES; 
} 

- (void) setInitialViewController { 
    NSURL *jsCodeLocation; 

    jsCodeLocation = [NSURL URLWithString:@"http://192.168.208.152:8081/index.ios.bundle?platform=ios&dev=true"]; 

    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"FidoTestProject" initialProperties:nil launchOptions:options]; 

    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 
    UIViewController *rootViewController = [UIViewController new]; 
    rootViewController.view = rootView; 
    self.window.rootViewController = rootViewController; 

    viewController = rootViewController; 

    [self.window makeKeyAndVisible]; 
} 

// this method will be called from the RCTBridge 
- (void) goToNativeView { 
    NSLog(@"RN binding - Native View - MyViewController.swift - Load From "main" storyboard); 
    UIViewController *vc = [UIStoryboard storyboardWithName:@"main" bundle:nil].instantiateInitialViewController; 
    self.window.rootViewController = vc; 
} 

@end 

---

MyViewController.swift

class RegisterViewController: UIViewController { 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     print("MyViewController loaded...") 
     // standard view controller will load from RN 
    } 
} 

---

MyProject的桥接-Header.h

@import Foundation; 
@import UIKit; 
@import CoreLocation; 
@import AVFoundation; 

#import "React/RCTBridge.h" 
#import "React/RCTBridgeModule.h" 
#import "React/RCTBundleURLProvider.h" 
#import "React/RCTRootView.h" 
#import "AppDelegate.h" 

---

ChangeViewBridge.h

#import <React/RCTBridgeModule.h> 

@interface ChangeViewBridge : NSObject <RCTBridgeModule> 

- (void) changeToNativeView; 

@end 

---

ChangeViewBridge.m

个

#import "RegisterBridge.h" 
#import "FidoTestProject-Swift.h" 
#import "AppDelegate.h" 

@implementation ChangeViewBridge 

// reference "ChangeViewBridge" module in index.ios.js 
RCT_EXPORT_MODULE(ChangeViewBridge); 

RCT_EXPORT_METHOD(changeToNativeView) { 
    NSLog(@"RN binding - Native View - Loading MyViewController.swift"); 
    AppDelegate *appDelegate = (AppDelegate *)[UIApplication sharedApplication].delegate; 
    [appDelegate goToNativeView]; 
} 

@end 

---

index.ios.js

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

'use strict'; 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Alert, 
    Text, 
    View, 
    NativeModules, 
    TouchableHighlight 
} from 'react-native'; 

export default class FidoTestProject extends Component { 

    constructor(props) { 
    super(props) 
    this.done = false; 
    } 

    _changeView() { 
     this.done = true; 
     this.render(); 
     NativeModules.ChangeViewBridge.changeToNativeView(); 
    } 

    render() { 
    if (!this.done) { 
     return (
     <View style={styles.container}> 
      <TouchableHighlight onPress={() => this._changeView()}> 
      <Text color="#336699"> 
       Press to Change to Native View 
      </Text> 
      </TouchableHighlight> 
     </View> 
    ); 
    } else { 
     return (<View></View>); 
    } 
    } 
}; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    } 
}); 

AppRegistry.registerComponent('FidoTestProject',() => FidoTestProject);