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

我想创建一个简单的UIView子类，然后通过桥接到React Native将其作为React Native JavaScript组件提供 . 我按照这些指示并翻阅了大量的反应源代码：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：

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的红色正方形时，这不会导致任何渲染到屏幕 . 我尝试过的：

• 我为ColorPicker添加了一些边框颜色和宽度，以确保它呈现出一些东西 . 它的高度/宽度为零，但在创建视图时指定了100x100大小的帧 .

• 我已经验证了如果我从项目中删除所有React Native代码并将此视图作为不同 rootViewController 的子视图，我的 UIView 将完全呈现我的预期 .

• 我已经通过Xcode和Chrome中的调试器来验证组件的管理器类是否初始化并查看视图 . （顺便说一句，这种情况发生了两次，可能是因为重新加载，但这似乎仍然效率低下） .

• 我已经完成了所有桥接代码，以确保我的模块已经注册并将其视图发送到桥接模块列表 .

• 我已经验证我的主.js文件中的 ColorPicker 在渲染到屏幕时以及通过 debugger 创建时不是 undefined .

• 我尝试将 height: 100, width: 100 的样式应用于渲染的 ColorPicker ，但它仍然没有显示红色的squARE

RN Gurus的问题 - 我还能做些什么来验证我的视图是否正确桥接？ - 在检查这些实例以验证视图是否设置正确时，Chrome调试器中是否应该查找任何内容？ - 我仍然是React的新手，我不是100％它的全部工作方式 . - 当我创建一个桥接组件时，我希望在Obj-C / Swift类中设置外观和布局，或者在使用CSS的JavaScript中更好 . 在我看来，前者是可以预期的 .

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