将React Native RCTRootView返回到Native ViewController

Question

我正在创建一个应用程序，将react-native与现有Swift应用程序集成。

我研究过类似的问题：

• React Native：解除/退出React NativeView返回Native
• 如何从反应本机页面返回本机视图控制器

同时遵循不同的教程：

• React原生Swift上的原生调用类方法
• Swift in React Native终极指南
• React Native教程集成在现有应用程序中*

以及官方文档

问题是：所有这些都已经过时了(除了文档(。它们中的大多数使用传统的Navigation而不是Stack Navigator。其中一个教程(带星号的教程(显示了如何使用应用程序的rootTag将React Native应用程序退回到Native应用，但同样，这是使用传统的Navigation完成的。

如果我尝试这样做，我将无法从我的应用程序中看到props。

我有一个里面有Button的情节提要，当点击时会调用这个UIViewController:

按钮控制器

import Foundation
import UIKit
import React
class ButtonController: UIViewController  {
@IBOutlet weak var button: UIButton!
@IBAction func buttonClicked(_ sender: Any) {
let data:[String : String] = ["onNavigationStateChange": "{handleNavigationChange}",
"uriPrefix":"/app"];
let rootView = MixerReactModule.sharedInstance.viewForModule("ReactNativeApp", initialProperties: data)
let viewController = UIViewController()
viewController.view = rootView
self.present(viewController, animated: true, completion: nil)
}
}

当我启动应用程序时，我可以看到：

2019-10-23 10:29:30.021 [info][tid:com.facebook.react.JavaScript] Running "ReactNativeApp" with {"rootTag":1,"initialProps":{"uriPrefix":"/app","onNavigationStateChange":"{handleNavigationChange}"}}

但是当我尝试访问React Native代码上的this.props属性时，我得到了undefined。

index.js

import HomeScreen from './components/HomeScreen'
import {AppRegistry} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
const MainNavigator = createStackNavigator({
Home: {screen: HomeScreen}
}, {
initialRouteName: 'Home'
})
const NavigationApp = createAppContainer(MainNavigator);
AppRegistry.registerComponent('ReactNativeApp', () => NavigationApp)
console.log("NANANA1", this)
console.log("NANANA2", this.routeName)
console.log("NANANA3", MainNavigator)
console.log("NANANA4", MainNavigator.props)
console.log("NANANA5", NavigationApp)
console.log("NANANA6", NavigationApp.props)
export default NavigationApp

主页屏幕.js

import React from 'react';
import {Text, View, Button, NativeModules} from 'react-native';
var RNBridge = NativeModules.RNBridge;
export default class HomeScreen extends React.Component {
static navigationOptions = {
headerTitle: () => (
<Text>'Welcome'</Text>
),
headerLeft: () => (
<Button title="Dismiss" onPress={() => {
console.log("WOLOLO: ", RNBridge)
console.log("ROGAN: ", this._reactInternalFiber.tag)
RNBridge.dismissPresentedViewController(this._reactInternalFiber.tag)
// RNBridge.dismissPresentedViewController(1)
}}/>
)
};
render() {
console.log('KIKIKI', this._reactInternalFiber.tag)
console.log("MMMMMMM: ", this.props)
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}

这是我在RN中用来生成我的视图的两个文件。我尝试了很多方法来获得rootTag的值，唯一一个似乎提供了这个值的是(XCode上的tag和rootTag是相同的(1((

this._reactInternalFiber.tag

但我不知道如何将这些值发送到我的headerLeft方法以使用相同的标记，这样当我按下Dismiss按钮时，它就会调用dismissPresentedViewController的Swift代码。

如何有效地解雇我的VC？或者至少让rootTag从Swift传递到我的headerLeft()方法？

我正在使用以下版本的react-native:

react-native-cli: 2.0.1
react-native: 0.61.2

Answer 1

如果您希望取消RN view 提供的本地swift view控制器

self.dismiss(animated: true, completion: nil)

我展示的快速视图控制器如下

let modelVC = ModelViewController()  <-- sub class of UIViewController
DispatchQueue.main.async {
let navController = UINavigationController(rootViewController: modelVC)
navController.modalPresentationStyle = .fullScreen
let topController = UIApplication.topMostViewController()
topController?.present(navController, animated: true, completion: nil)
}

我对UIApplication进行了扩展，以了解之上使用的最顶级的视图控制器是什么

extension UIApplication {
class func topMostViewController(controller: UIViewController? = UIApplication.shared.keyWindow?.rootViewController) -> UIViewController? {
if let navigationController = controller as? UINavigationController {
return topMostViewController(controller: navigationController.visibleViewController)
}
if let tabController = controller as? UITabBarController {
if let selected = tabController.selectedViewController {
return topMostViewController(controller: selected)
}
}
if let presented = controller?.presentedViewController {
return topMostViewController(controller: presented)
}
return controller
}
}