PKCanvasView作为子视图添加时不显示问题求助

核心原因 #

你遇到的问题根源是自定义BBNativePencilView中的PKCanvasView未设置正确的布局规则。

当直接返回PKCanvasView时，React Native的RCTViewManager会自动根据RN侧传递的样式参数为它设置合适的frame，所以能正常显示。但把PKCanvasView作为子视图嵌套到自定义UIView后，这个自定义View不会自动处理子视图的布局，默认状态下canvas的frame是CGRect(x:0, y:0, width:0, height:0)，自然看不到任何内容。

修复方案 #

方案1：手动设置Frame（简单直接） #

在初始化自定义视图时，给canvas设置与父视图一致的bounds，并且重写layoutSubviews确保父视图大小变化时子视图同步调整：

class BBNativePencilView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        canvas.frame = self.bounds // 初始化时设置frame
        self.addSubview(canvas)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // 父视图尺寸变化时更新子视图frame
    override func layoutSubviews() {
        super.layoutSubviews()
        canvas.frame = self.bounds
    }
    
    lazy var canvas: PKCanvasView = {
        let canvasView = PKCanvasView()
        let drawing = PKDrawing.init()
        canvasView.drawing = drawing;
        if #available(iOS 14.0, *) {
            canvasView.drawingPolicy = .anyInput
        }
        canvasView.isOpaque = false;
        canvasView.backgroundColor = .yellow
        canvasView.tool = PKInkingTool(.pen, color: UIColor.black, width: 5)
        canvasView.becomeFirstResponder()
        return canvasView;
    }()
}

方案2：使用Auto Layout约束（iOS标准做法） #

通过自动布局让canvas铺满整个父视图，适配各种尺寸变化：

class BBNativePencilView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.addSubview(canvas)
        
        // 禁用 autoresizing mask，启用自动布局
        canvas.translatesAutoresizingMaskIntoConstraints = false
        
        // 添加约束，让canvas完全贴合父视图边缘
        NSLayoutConstraint.activate([
            canvas.topAnchor.constraint(equalTo: self.topAnchor),
            canvas.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            canvas.trailingAnchor.constraint(equalTo: self.trailingAnchor),
            canvas.bottomAnchor.constraint(equalTo: self.bottomAnchor)
        ])
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    lazy var canvas: PKCanvasView = {
        let canvasView = PKCanvasView()
        let drawing = PKDrawing.init()
        canvasView.drawing = drawing;
        if #available(iOS 14.0, *) {
            canvasView.drawingPolicy = .anyInput
        }
        canvasView.isOpaque = false;
        canvasView.backgroundColor = .yellow
        canvasView.tool = PKInkingTool(.pen, color: UIColor.black, width: 5)
        return canvasView;
    }()
    
    // 视图进入窗口后再成为第一响应者，确保输入生效
    override func didMoveToWindow() {
        super.didMoveToWindow()
        canvas.becomeFirstResponder()
    }
}

额外提示 #

• 调试时保留backgroundColor = .yellow可以快速确认视图是否正常显示，上线前可改为clear
• becomeFirstResponder()放在didMoveToWindow中比初始化时调用更可靠，避免视图未加载完成时调用失效

内容的提问来源于stack exchange，提问作者Kevin Amiranoff