- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在创建一个应用程序以将 react-native
与现有的 Swift 应用程序集成。
我调查过类似的问题:
在学习不同的教程时:
和官方docs
问题是:所有这些都已过时(但文档除外)。他们中的大多数使用旧版 Navigation
而不是 Stack Navigator
。其中一个教程(带星号的那个)展示了如何使用应用程序的 rootTag
将 React Native 应用程序关闭回 Native 应用程序,但同样,这是使用旧版 完成的导航
。
如果我尝试这样做,我将无法从我的应用程序中看到 props
。
我有一个 Storyboard,里面有一个 Button
,当点击时调用这个 UIViewController
:
按钮 Controller
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 中用来生成 View 的 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 View 呈现的 native swift View Controller
self.dismiss(animated: true, completion: nil)
我将 swift view 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 上有一个扩展来找出上面使用的最顶层的 View 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
}
}
关于ios - 将 React Native RCTRootView 关闭到 Native ViewController,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58527243/
我正在创建一个 native 应用程序,但我需要使用 objective-c 来构建我的自定义 UIView。但问题是这个 UIView 需要显示 react 内容。例如 react 文本输入和按钮。
我正在编写一个具有两个 View 的 iOS 应用程序。每个 View 都是一个 RCTRootView,由不同的 React Native 组件创建。 我调查了这个问题 ( Multiple RCT
我正在开发一个混合 ios 原生/react-native 项目。 假设我有一个 UIImage 的实例在我的应用程序的某个时刻。我需要在我的 react native 组件中显示此图像。我创建了一个
我正在研究 React native iOS 应用程序(演示)。并且是 React Native 的新手。我想了解 RCTRootView,即它是如何工作的。我有疑问,即在 app delegate
如果我们在单个 React Native 应用程序中创建多个 RCTRootViews 并让它们加载不同的 javascript 包,它们会在完全隔离的上下文中运行吗?完全沙盒化,完全没有冲突? 最佳
我想使用 React-Native [与现有应用程序集成]。但是我收到以下错误: 'RCTRootView.h' file not found 如下图所示: 最佳答案 如果你使用的是cocoapod,
我不是 JS 或 React 程序员,但我需要在我的项目中使用它。 我想将值从我的 native 代码传递到我的 React View ,以便它由 React 引擎呈现。 我尝试了很多变体 我的本
我正在创建一个应用程序以将 react-native 与现有的 Swift 应用程序集成。 我调查过类似的问题: React-Native: Dismiss/Exit React-Native Vie
我正在尝试在 UITableViewCell 中加载 RCTRootView。 React View 的数据来自 API。 当详细 View 加载时,我会快速初始化一个 RCTRootView,然后为
我正在将组件集成到使用 Objective-C/Swift 编写的现有 iOS 应用中。 作为我的应用程序的 Root View Controller ,我使用 UINavigationControl
我正在使用react-native-map,它在ios和android上运行良好。 我的 React Native 版本是 0.61.2。但在 ios 中,当我单击 map 时,会显示警告“-[RCT
如何将 RCTRootView 作为 subview 添加到应用程序 RootViewController 中。 这就是我想要实现的。我有一个 iOS native 应用程序,可以将一些 OpenGL
我有一个现有的 iOS 应用程序,我正在使用 React Native 的 RCTRootView 为我的应用程序绘制一些组件。 // swift private lazy var RNContent
我是一名优秀的程序员,十分优秀!