![](/img/trans.png)
[英]Add RCTRootView as a subview to rootViewController in React-Native
[英]Dismiss a React Native RCTRootView back to a Native ViewController
我正在創建一個應用程序以將react-native
與現有的 Swift 應用程序集成。
我研究過類似的問題:
在遵循不同的教程時:
和官方文檔
問題是:所有這些都已過時(但文檔)。 他們中的大多數使用舊版Navigation
而不是Stack Navigator
。 其中一個教程(帶星號的)展示了如何使用應用程序的rootTag
將 React Native 應用程序解散回 Native 應用程序,但同樣,這是使用舊版Navigation
完成的。
如果我嘗試這樣做,我將無法從我的應用程序中看到props
。
我有一個 Storyboard ,里面有一個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
HomeScreen.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 中用來生成我的視圖的 2 個文件。 我已經嘗試了很多方法來獲取rootTag
值,而唯一提供此值的方法是( XCode 上的tag
和rootTag
相同( 1
))
this._reactInternalFiber.tag
但是我不知道如何將這些值發送到我的headerLeft
方法以使用相同的標簽,以便當我按下Dismiss
按鈕時,它會調用 Swift 代碼來為dismissPresentedViewController
。
我怎樣才能有效地解雇我的 VC? 或者至少讓rootTag
從 Swift 傳遞到我的headerLeft()
方法?
我正在使用這些版本的react-native
:
react-native-cli: 2.0.1
react-native: 0.61.2
如果您希望忽略 RN 視圖中呈現的原生 swift 視圖 controller
self.dismiss(animated: true, completion: nil)
我介紹 swift 視圖 controller 如下
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 上有一個擴展,以找出上面使用的最高視圖 controller 是什么
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
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.