为什么 RPBroadcastPickerView 呈现空白屏幕？答案

【问题标题】：Why is RPBroadcastPickerView rendering a blank white screen?为什么 RPBroadcastPickerView 呈现空白屏幕？
【发布时间】：2021-05-17 07:39:47
【问题描述】：

我为 react-native (v0.61.5) 应用程序创建了原生 iOS 模块。它所做的只是返回原生的 RPBroadcastPickerView。我期望显示选择器视图，但在我的测试中只显示一个空白的白色屏幕。

这是原生模块的样子：

#import <ReplayKit/ReplayKit.h>
#import <React/RCTViewManager.h>

@interface BroadcastPickerManager : RCTViewManager
@end

@implementation BroadcastPickerManager

RCT_EXPORT_MODULE(BroadcastPicker)

- (UIView *)view
{
  return [[RPSystemBroadcastPickerView alloc] init];
}

@end

这就是它在 RN 中的样子

BroadcastPickerView.js：

import { requireNativeComponent, View } from 'react-native'

module.exports = requireNativeComponent('BroadcastPicker')

TestScreen.js：

class TestScreen extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'red'}}>
       <BroadcastPickerView style={{ height: 200, width: 200, backgroundColor: 'blue'}} />
      </View>
    )
  }
}

编辑：我尝试在本机代码中设置框架，以及在 javascript 中设置宽度/高度。设置本机代码没有影响。在 javascript 中设置高度/宽度以我选择的背景颜色显示视图。不完全确定我期望发生什么，但我猜测 RPBroadcastPickerView 不是黑色的空视图。

React native docs on native module development found here 这样说：

注意：不要尝试将 frame 或 backgroundColor 属性设置为您通过 -view 方法公开的 UIView 实例。反应 Native 将覆盖您的自定义类设置的值，以便匹配您的 JavaScript 组件的布局道具。如果你需要这个控制粒度包装 UIView 实例可能会更好您想在另一个 UIView 中设置样式并返回包装器 UIView 反而。有关详细信息，请参阅第 2948 期。

不确定我是否只是遗漏了一些东西，但是当导航到此屏幕时没有呈现任何内容。有什么建议吗？

【问题讨论】：

标签： ios react-native react-native-ios react-native-native-module rpsystembroadcastpickerview

【解决方案1】：

您需要为 RPSystemBroadcastPickerView 提供帧大小：

- (UIView *)view
{
  return [[RPSystemBroadcastPickerView alloc] initWithFrame: CGRectMake(0, 0, 50, 50)];
}

请注意，更改 frame 属性不会调整 RPSystemBroadcastPickerView 的大小（至少在 iOS 13 上）。自动布局也不会调整视图大小。

您可以在docs 中找到一个 Swift 示例：

let broadcastPicker = RPSystemBroadcastPickerView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))

【讨论】：

我尝试了您的建议，但无济于事。见我上面的编辑
您是否尝试检查包装视图和 BroadcastPickerView 的元素大小，在您编辑后是否正确？ RPSystemBroadcastPickerView 是一个小圆形按钮，可以是 red。也许尝试改变你的包装背景颜色，因为红色不允许看到按钮。
我刚刚做了一些测试，显示更改frame 属性或使用自动布局不会更新RPSystemBroadcastPickerView 框架。调用initWithFrame 似乎是唯一正确的解决方案。我已经更新了答案。