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);