试图注册两个同名的视图

Question

我知道以前有人问过这种问题，但它们与第三方库有关，我的与 requireNativeComponent

我已经React 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>
  );}

代码工作正常，但即使我对我的本机代码进行了一些更改并执行 command+s 来执行fast refresh我不断收到错误提示Tried to register two views with the same name Canvas，但是当我运行时npx react-native run-ios，代码工作正常。因此，hot reloading or fast refresh即使我没有更改本机组件，当我包含由我创建的本机组件时，也不支持总而言之。我可以理解，如果我在 iOS swift 或目标 c 代码中更改了某些内容，那么我需要重新运行， npx react-native run-ios但即使在iOS侧面没有更改并且仅在JS侧面进行更改之后，我仍然会收到此错误。Canvas我的项目中没有两个同名的视图。我还尝试清除watchman、删除package.json和重新安装npm模块和pod

同样的问题也发生在android一边

Answer 1

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

const Canvas = requireNativeComponent('Canvas');

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

1. 将该行移动到它自己的文件并导出它：export const Canvas = requireNativeComponent('Canvas');，然后将其导入到您想要使用的位置。如果您保存包含此行的新文件，您仍然会遇到相同的错误，但您通常不会更改此文件，因此它通常不会成为问题。
2. 防止本地组件被requireNativeComponent多次注册（通过）。这有点难看，但你可以通过将它存储在全局范围内来做到这一点：const Canvas = global['CanvasComponent'] || (global['CanvasComponent'] = requireNativeComponent('Canvas'));