ios - 为什么我的 React Native 桥接 iOS 组件不起作用？

Question

我想创建一个简单的 UIView 子类，然后通过桥接到 React Native 使其作为 React Native JavaScript 组件可用。我遵循了这些指示并浏览了大量的 react 源代码:https://facebook.github.io/react-native/docs/native-components-ios.html

不幸的是，我不知道我的 React Native 组件哪里出了问题。这是我的 Obj-C 管理器类:

// header
#import "RCTViewManager.h"
#import "ColorPicker.h"

@interface ColorPickerManager : RCTViewManager

@end

// implementation
#import "ColorPickerManager.h"

@interface ColorPickerManager()

@property (nonatomic) ColorPicker * colorPicker;

@end

@implementation ColorPickerManager

RCT_EXPORT_MODULE()

- (instancetype)init {
    self = [super init];
    if ( self ) {
        NSLog(@"color picker manager init");
    self.colorPicker = [[ColorPicker alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    }
    return self;
}

- (UIView *)view {
    NSLog(@"color picker manager -view method");
    return self.colorPicker;
}

@结束

这是我通过上述 -view 提供的简单 UIView 子类方法:

// header
#import <UIKit/UIKit.h>

@interface ColorPicker : UIView

@end

// implementation
#import "ColorPicker.h"

@interface ColorPicker()

@property (nonatomic) NSArray * colors;

@end

@implementation ColorPicker

- (instancetype)init {
    NSLog(@"init");
    self = [super init];
    if ( self ) {
       [self setUp];
    }
    return self;
}

- (instancetype)initWithFrame:(CGRect)frame {
    NSLog(@"init with frame: %@", NSStringFromCGRect(frame));
    self = [super initWithFrame:frame];
    if ( self ) {
        [self setUp];
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    NSLog(@"init with coder: %@", aDecoder);
   self = [super initWithCoder:aDecoder];
   if ( self ) {
       [self setUp];
   }
   return self;
}

- (void)setUp {
    self.colors = @[[UIColor redColor], [UIColor greenColor], [UIColor blueColor]];
    self.backgroundColor = self.colors[0];
}

- (void)layoutSubviews {
    NSLog(@"layout subviews");
}

@end

最后，这是我桥接到 JavaScript 的 React 组件:

var { requireNativeComponent } = require('react-native');
var ColorPicker = requireNativeComponent('ColorPicker', null);
module.exports = ColorPicker;
debugger;

声明并呈现到屏幕上:

'use strict';
var React = require('react-native');
var ColorPicker = require('./BridgedComponents/ColorPicker.js');


var {
  StyleSheet
} = React;

var iOS = React.createClass({

    render: function() {
        debugger;
        return (
            <ColorPicker style={styles.container} />
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

AppRegistry.registerComponent('iOS', () => iOS);

当我希望看到一个 100x100 的红色方 block 时，这不会导致屏幕上出现任何渲染。我尝试过的:

• 我已将一些边框颜色和宽度添加到 ColorPicker 以确保它正在呈现某些内容。它的高度/宽度为零，但我在创建 View 时指定了 100x100 大小的框架。
• 我已验证我的 UIView如果我从项目中删除所有 React Native 代码并将此 View 作为不同 rootViewController 的 subview ，将完全按照我的预期呈现。 .
• 我已经通过 Xcode 和 Chrome 中的调试器来验证组件的管理器类是否初始化并提供了 View 。 (顺便说一下，这可能是因为重新加载，但仍然效率不高)。
• 我还逐步完成了所有桥接代码，以确保我的模块已注册并将其 View 提供给桥接模块列表。
• 我已经验证 ColorPicker在我的主 .js 文件中不是 undefined当时它呈现在屏幕上，当它通过 debugger 创建时.
• 我尝试应用 height: 100, width: 100 的样式到呈现的ColorPicker但它仍然没有显示红色正方形

RN 大师的问题- 我还能做些什么来验证我的 View 是否正确桥接？- 在检查这些实例以验证 View 设置是否正确时，我应该在 Chrome 调试器中寻找什么吗？- 我已经尝试遵循 repo 中的一些源代码，但我仍然是 React 的新手，我不是 100% 了解它是如何工作的。- 当我创建桥接组件时，我希望在 Obj-C/Swift 类中设置外观和布局，还是在 JavaScript 和 CSS 中设置更好。在我看来，前者是意料之中的。

任何帮助/建议将不胜感激。

Answer 1

除了添加了 ColorPicker View 之外，您什么也看不到。

问题是 ReactNative 自行管理其 backgroundColor 属性并覆盖您的初始选择。

您可以在 ColorPicker.m 中添加以下方法并设置断点以查看它何时发生:

- (void)setBackgroundColor:(UIColor *)backgroundColor {
    NSLog(@"setBackgroundColor %@", backgroundColor);
    [super setBackgroundColor:backgroundColor];
}

您应该让 React Native 处理桥接组件的大小和外观。但是完全可以找到完全由 native 端控制的自定义 subview 。

还有你的 ColorPickerManager should return a new instance调用 view 方法时桥接的 View 。

即你应该使用这个:

@implementation ColorPickerManager

RCT_EXPORT_MODULE()

- (instancetype)init {
  self = [super init];
  if ( self ) {
    NSLog(@"color picker manager init");
  }
  return self;
}

- (UIView *)view {
  NSLog(@"color picker manager -view method");
  return [[ColorPicker alloc] init];
}

@end

否则您将无法显示 ColorPicker 组件的 2 个(或更多)实例。