React-Native:无法触发本机 UIButton 触摸事件

Question

我正在将原生 Swift 模块桥接到 React Native 中。我创建了一个UIView，它创建了一个带有目标处理程序的UIButton。它会正确呈现所有内容，但是单击按钮不会触发任何内容。我在这里主持了一个演示：https://github.com/esbenp/react-native-swift-test

我的原生模块相当简单：https://github.com/esbenp/react-native-swift-test/blob/master/ios/TestModule.swift

let Button = UIButton(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
Button.setTitleColor(UIColor.blue, for: .normal)
Button.setTitle("Press me", for: .normal)
Button.addTarget(self, action: #selector(TestModule.onClick), for: .touchUpInside)
self.addSubview(Button)

我使用管理器桥接它：https://github.com/esbenp/react-native-swift-test/blob/master/ios/TestModuleManager.m

#import <React/RCTViewManager.h>
#import "ReactNativeSwiftTest-Swift.h"
@interface TestModuleManager : RCTViewManager
@end
@implementation TestModuleManager
RCT_EXPORT_MODULE()
- (UIView *)view
{
return [[Parent alloc] init];
}
@end

然后在 JS： https://github.com/esbenp/react-native-swift-test/blob/master/index.ios.js 中运行它

我不是iOS专家，但它似乎与框架有关。如果我使用相同的本机模块并在普通的iOS项目中使用它，UIViewController如下所示：

override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let Button = TestModule(frame: CGRect(x: 0, y: 0, width: 500, height: 500))
self.view.addSubview(Button)
}

它有效。我假设这是因为 React Native 创建的框架是width=0和height=0的(至少如果我NSLog(String(describing: frame.size.height))的话，它是这样说的(。

iOS MapView 示例指定不覆盖框架，因为 React Native 将设置这一点。我不知道框架是错误的还是我在这里错过了其他上下文？我尝试按照#2948 #15097 中的说明进行操作，但没有任何帮助。

Answer 1

我在这里发现了错误。事实证明，您必须在JS端向实际的本机组件添加flex: 1才能使框架正确填充。

以前

export default class ReactNativeSwiftTest extends Component {
render() {
return (
<View style={styles.container}>
<Test />
</View>
);
}
}

后

export default class ReactNativeSwiftTest extends Component {
render() {
return (
<View style={styles.container}>
<Test style={{flex: 1}} />
</View>
);
}
}