react-native - 试图注册两个同名的 View

Question

我知道以前有人问过这种问题，但它们与第三方库有关，我的与 requireNativeComponent 有关。
我创建了一个 React Native来自 native 的组件 iOS成分
这是我的 iOS代码CanvasView 文件

class CanvasView: UIView {
    
    var lines = [[CGPoint]]()
    
    override init(frame: CGRect) {
        super.init(frame:frame)
        backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 0)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        guard let context = UIGraphicsGetCurrentContext() else {
            return
        }
        
        context.setStrokeColor(#colorLiteral(red: 0.9529411793, green: 0.6862745285, blue: 0.1333333403, alpha: 1))
        context.setLineWidth(10)
        context.setLineCap(.butt)
        
        lines.forEach { (line) in
            for(i,p) in line.enumerated() {
                if i == 0 {
                    context.move(to: p)
                } else {
                    context.addLine(to: p)
                }
            }
        }
        
        
        
        context.strokePath()
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        lines.append([CGPoint]())
    }
    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard let point = touches.first?.location(in: nil) else {
            return
        }
        
        
        
        guard var lastLine = lines.popLast() else {return }
        lastLine.append(point)
        lines.append(lastLine)
        setNeedsDisplay()
    }
}

Canvas.swift文件

import Foundation

@objc(Canvas)
class Canvas: RCTViewManager {
  override func view() -> UIView! {
    return CanvasView()
  }
  
  override class func requiresMainQueueSetup() -> Bool {
    return true
  }
  
}

Canvas.m文件

#import <Foundation/Foundation.h>
#import "React/RCTViewManager.h"


@interface RCT_EXTERN_MODULE(Canvas, RCTViewManager)
@end

这是我的 JS代码

const Canvas = requireNativeComponent('Canvas');

const App = () => {
 return (
    <View style={styles.container}>
      <Canvas style={styles.bottom} />
    </View>
  );}

代码工作正常，但即使我对我的 native 代码进行了一些更改并执行 command+s 来执行 fast refresh我不断收到错误提示 Tried to register two views with the same name Canvas ，但是当我运行时 npx react-native run-ios ，代码工作正常。总而言之 hot reloading or fast refresh即使我没有更改 native 组件，当我包含我创建的 native 组件时也不支持。我可以理解，如果我在 iOS swift 或 objective-c 代码中更改了某些内容，那么我需要重新运行 npx react-native run-ios但即使在 iOS 没有变化之后边和只做 JS 中的更改一边我不断收到这个错误。没有两个 View 具有相同的名称 Canvas在我的项目中。我也试过清理 watchman , 删除 package.json并重新安装 npm模块和 pod同样的问题发生在 android侧面也是

Answer 1

运行快速刷新时，将再次执行此行:

const Canvas = requireNativeComponent('Canvas');

这就是“试图注册两个具有相同名称的 View ”错误的来源。有几种方法可以解决这个问题。

将该行移动到它自己的文件并导出它:export const Canvas = requireNativeComponent('Canvas'); ，然后将其导入到您想要使用的位置。如果您保存包含此行的新文件，您仍然会遇到相同的错误，但您通常不会更改此文件，因此它通常不会成为问题。

防止本地组件被多次注册(通过 requireNativeComponent )。这有点难看，但你可以通过将它存储在全局范围内来做到这一点:const Canvas = global['CanvasComponent'] || (global['CanvasComponent'] = requireNativeComponent('Canvas'));