0

我正在构建一个由原生 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 中的设计：

在 Storyboard 中查看设计

模拟器中显示的内容：

模拟器中显示的视图

4

2 回答 2

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

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

-(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;
}

布局固定

于 2017-07-31T18:04:53.443 回答