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

Question

我正在构建一个由本机iOS视图和反应原生屏幕组成的导航堆栈。但是，当我推送本机iOS视图时，视图布局不会像故事板中那样设计出来。我在Xcode中使用autolayout作为原生视图。

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

Answer 1

1. 您不应该缓存-view方法的输出，始终返回包含所有新依赖项的新视图，例如视图控制器。
2. 您应该使用约束来布局视图，因为ReactNative通过安装过程发送更改视图框架的方法。没有约束，布局可能会被打破。
3. 对于你的视图的计算框架，React Native使用YogaLayout（旧的CSSLayout），确保它计算出正确的视图大小。如果没有实现ViewManager的-shadowView方法并返回具有正确的width和height属性值的RCTShadowView实例。

Answer 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