为什么我的本机桥接iOS组件不能工作？
我想要创建一个简单的UIView子类，然后通过桥接将其作为组件使用。我遵循了这些方向，并浏览了大量的react源代码：https://facebook.github.io/react-native/docs/native-components-ios.html
不幸的是，我不知道我的本机组件在哪里失败。这是我的Obj经理班：
// 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;
}@end
下面是我通过上面的UIView方法获得的简单-view子类：
// 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最后，下面是我的react组件被桥接到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大小的框架。
- 我已经验证了，如果我从项目中删除所有的本机代码，并将这个视图作为一个不同的
UIView的子视图，那么我的rootViewController就会呈现出我所期望的结果。 - 我已经通过Xcode和Chrome中的调试器来验证组件的manager类是否初始化并销售视图。(顺便说一句，这种情况发生了两次，可能是因为重新加载，但这似乎仍然没有效率)。
- 我已经完成了所有的桥接代码，以确保我的模块已经注册，并将其观点传播到桥接模块列表中。
- 我已经验证我的主.js文件中的.js在呈现到屏幕时和通过
debugger创建时不是undefined。 - 我尝试过将
height: 100, width: 100的样式应用于呈现的ColorPicker，但它仍然没有显示红色的squARE
RN Gurus的问题--我还能做些什么来验证我的观点是正确的吗？--在检查这些实例以验证视图是否正确设置时，我应该在Chrome调试器中寻找什么吗？-我已经尝试遵循回购中的一些源代码，但我还没有做出反应，而且我还没有百分之百地了解它是如何工作的。-当我创建一个桥接组件am时，我希望在Obj/Swift类中设置外观和布局，或者用CSS在JavaScript中这样做更好。在我看来，前者是意料之中的。
任何帮助/建议都将不胜感激。
回答 1
Stack Overflow用户
发布于 2016-05-27 16:08:41
除了添加了ColorPicker视图之外，什么都看不到。
问题是，ReactNative本身正在管理它的backgroundColor属性，并且重写了您的初始选择。
您可以在ColorPicker.m中添加以下方法，并放置一个断点以查看何时发生：
- (void)setBackgroundColor:(UIColor *)backgroundColor {
NSLog(@"setBackgroundColor %@", backgroundColor);
[super setBackgroundColor:backgroundColor];
}您应该让本机处理您的桥接组件的大小和外观。但是，它完全可以发现具有完全由本地控制的自定义子视图。
此外，每当视图调用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个(或更多)实例。
https://stackoverflow.com/questions/32653805
复制相似问题
腾讯云开发者
