為什么我的React Native橋接iOS組件不起作用？

Question

我想創建一個簡單的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將完全呈現我期望的rootViewController 。
• 我已經通過Xcode和Chrome中的調試器來驗證組件的管理器類是否初始化並查看視圖。 （順便說一句，這種情況發生了兩次，可能是因為重新加載，但這似乎仍然效率低下）。
• 我已經逐步完成了所有橋接代碼，以確保我的模塊已經注冊並將其視圖發送到橋接模塊列表。
• 我已經驗證了我的主.js文件中的ColorPicker在渲染到屏幕時以及通過debugger創建時undefined 。
• 我嘗試將height: 100, width: 100樣式height: 100, width: 100應用於渲染的ColorPicker但它仍然沒有顯示紅色的squARE

RN Gurus的問題 - 我還能做些什么來驗證我的視圖是否正確橋接？ - 在檢查這些實例以驗證視圖是否設置正確時，Chrome調試器中是否應該查找任何內容？ - 我試過跟蹤回購中的一些源代碼，但我還是React的新手，我不是100％它的全部工作方式。 - 當我創建一個橋接組件時，我希望在Obj-C / Swift類中設置外觀和布局，或者在使用CSS的JavaScript中更好。 在我看來，前者是可以預期的。

任何幫助/建議將不勝感激。

Answer 1

除了添加了ColorPicker視圖外，您沒有看到任何內容。

問題是ReactNative正在管理其backgroundColor屬性並覆蓋您的初始選擇。

您可以在ColorPicker.m添加以下方法，並設置斷點以查看它何時發生：

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

您應該讓React Native處理橋接組件的大小和外觀。 但它完全發現自定義子視圖完全由本機控制。

此外，只要調用view方法， ColorPickerManager 就會返回您正在橋接的視圖的新實例 。

即你應該使用這個：

@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個（或更多）實例。