React-Native iOS - React-Nativeビューからボタンが押された状態で、非React-Nativeビュー（ネイティブiOS View Controller）にナビゲートするにはどうすればよいですか？

Question

RNドコと他の例では、ネイティブiOSビューコントローラからReact-Nativeビューを起動する方法を示しますが、逆の方法はありません。誰かが私がこれをどうやってできるのか説明できますか？

Answer 1

私はこれを理解することができました。私の場合は、自分のSwiftネイティブビューコントローラを使ってObj-Cベースプロジェクト（RNデフォルト）を使用しています。

簡単に言えば、答えは、RNB javascriptがネイティブiOSメソッドを呼び出すようにRTCBridgeモジュールを使用することです。ここで

---

実装が続く、コンポーネントの概要です：

1. AppDelegate.h/.M - 初期RNビューのRN javascriptのインデックスファイル、またセットアップ方法への初期化ネイティブビューコントローラにルート・ビュー・コントローラを交換する（この方法はRTCBridgeモジュールから呼び出される
2. MyViewController.swift - 標準的な実装の通常のUIViewController
3. MyProjectと、ブリッジ-がheader.h - Obj-を提供C < - >スウィフト通信
4. ChangeViewBridge.h/.M - これはあなたがjavascriptの
5. index.ios.js RNからネイティブのiOSメソッドを呼び出すことができるようにバインディングを提供 - カスタム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);