react-native-navigation ios - 将 UIViewController 推送到导航堆栈

Posted 2023-03-15

【中文标题】react-native-navigation ios - 将 UIViewController 推送到导航堆栈

【英文标题】：react-native-navigation ios - push UIViewController to navigation stack

【发布时间】：2017-07-28 15:31:02

【问题描述】：

我正在构建一个包含原生 ios 视图和 react-native 屏幕的导航堆栈。但是当我推送原生 iOS 视图时，视图布局并没有按照情节提要中的设计出现。我在 Xcode 中为原生视图使用自动布局。

ICNativeViewManager.h
---------------------
#import <React/RCTViewManager.h>

@interface ICNativeViewManager : RCTViewManager

@end

ICNativeViewManager.m
---------------------
#import <React/RCTViewManager.h>
#import <React/RCTView.h>

#import "ICNativeViewManager.h"

@implementation ICNativeViewManager

UIViewController *vc;

RCT_EXPORT_MODULE()

-(UIView *)view

  if (vc == nil)
  
    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"ICNativeUI" bundle:nil];
    vc = [storyboard instantiateInitialViewController];
  
  return vc.view;


RCT_EXPORT_VIEW_PROPERTY(labelText, NSString)

@end

Xcode 中的设计：

View Design in Storyboard

模拟器中显示的内容：

View shown in Simulator

【参考方案1】：

您不应缓存 -view 方法的输出，始终返回具有所有新依赖项的新视图，例如视图控制器。 您应该使用约束来布局您的视图，因为 ReactNative 通过挂载过程发送更改视图框架的方法。没有约束的布局可能会被破坏。 要计算视图的框架 React Native 使用 YogaLayout（旧的 CSSLayout），请确保它计算正确的视图大小。如果不实现 ViewManager 的 -shadowView 方法并返回具有正确宽度和高度属性值的 RCTShadowView 实例。

【讨论】：

#2 - 我加载视图控制器的情节提要使用自动布局。因此，视图已经在使用约束进行布局。

#1 - 我必须保留对视图控制器的引用。否则，它会在 view() 方法返回后立即被释放，从而阻止与视图的进一步交互。

@ramg 在您的情况下，无法为超级视图设置约束，因为在设计时不存在超级视图（一个原型）。

如果您需要旧视图控制器，您应该创建新视图并将其提供给旧视图控制器。如果您返回旧视图，在某些情况下，react 可能会使应用程序崩溃。

【参考方案2】：

我已经设法使用带有约束的容器视图解决了布局问题。在点击按钮时接收回调仍然有问题。

-(UIView *)view

  UIView *parentView = [ICNativeView new];
  parentView.translatesAutoresizingMaskIntoConstraints = NO;
  UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"ICNativeUI" bundle:nil];
  self.viewController = [storyboard instantiateInitialViewController];
  UIView *nativeView = self.viewController.view;
  [parentView addSubview:nativeView];
  [parentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-0-[nativeView]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(nativeView)]];
  [parentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[nativeView]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(nativeView)]];
  return parentView;

Layout Fixed