React Native iOS模拟器报错：RCTView重复注册topClick事件

环境配置 #

• React Native: 0.73.1
• Node.js: 20.10.0
• NMapsMap: 3.17.0

问题描述 #

通过npm安装react-native-naver-map组件后，Android设备运行正常，但iOS模拟器构建时触发错误，错误日志如下：

Component 'RCTView' re-registered direct event 'topClick' as a bubbling event

RCTModuleConstantsForDestructuredComponent
RCTUIManager.m:1533
moduleConstantsForComponentData
__28-[RCTUIManager getConstants]_block_invoke
__NSDICTIONARY_IS_CALLING_OUT_TO_A_BLOCK__
-[__NSDictionaryM enumerateKeysAndObjectsWithOptions:usingBlock:]
-[RCTUIManager getConstants]
-[RCTUIManager constantsToExport]
-[RCTModuleData gatherConstantsAndSignalJSRequireEnding:]
-[RCTModuleData exportedConstants]
facebook::react::RCTNativeModule::getConstants()
facebook::react::ModuleRegistry::getConfig(std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&)
facebook::react::JSINativeModules::createModule(facebook::jsi::Runtime&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&)
facebook::react::JSINativeModules::getModule(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&)
facebook::react::JSIExecutor::NativeModuleProxy::get(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&)
facebook::jsi::DecoratedHostObject::get(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&)
facebook::hermes::HermesRuntimeImpl::JsiProxy::get(hermes::vm::SymbolID)
hermes::vm::JSObject::getComputedWithReceiver_RJS(hermes::vm::Handle<hermes::vm::JSObject>, hermes::vm::Runtime&, hermes::vm::Handle<hermes::vm::HermesValue>, hermes::vm::Handle<hermes::vm::HermesValue>)
hermes::vm::CallResult<hermes::vm::HermesValue, (hermes::vm::detail::CallResultSpecialize)2> hermes::vm::Interpreter::interpretFunction<false, false>(hermes::vm::Runtime&, hermes::vm::InterpreterState&)
hermes::vm::Runtime::interpretFunctionImpl(hermes::vm::CodeBlock*)
hermes::vm::Runtime::runBytecode(std::__1::shared_ptr<hermes::hbc::BCProviderBase>&&, hermes::vm::RuntimeModuleFlags, llvh::StringRef, hermes::vm::Handle<hermes::vm::Environment>, hermes::vm::Handle<hermes::vm::HermesValue>)
facebook::hermes::HermesRuntimeImpl::evaluatePreparedJavaScript(std::__1::shared_ptr<facebook::jsi::PreparedJavaScript const> const&)
facebook::hermes::HermesRuntime::evaluateJavaScriptWithSourceMap(std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&)
facebook::hermes::HermesRuntimeImpl::evaluateJavaScript(std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&)
facebook::jsi::RuntimeDecorator<facebook::jsi::Runtime, facebook::jsi::Runtime>::evaluateJavaScript(std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&)
facebook::jsi::WithRuntimeDecorator<facebook::react::(anonymous namespace)::ReentrancyCheck, facebook::jsi::Runtime, facebook::jsi::Runtime>::evaluateJavaScript(std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&)
facebook::react::JSIExecutor::loadBundle(std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)
facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$__1::operator()(facebook::react::JSExecutor*)
decltype(std::declval<facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$__1&>()(std::declval<facebook::react::JSExecutor*&>())) std::__1::__invoke[abi:v160006]<facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$__1&, facebook::react::JSExecutor*&>(facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$__1&, facebook::react::JSExecutor*&&)
void std::__1::__invoke_void_return_wrapper<void, true>::__call<facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$__1&, facebook::react::JSExecutor*&>(facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$__1&, facebook::react::JSExecutor*&&)
std::__1::__function::__alloc_func<facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$__1, std::__1::allocator<facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$__1&>, void (facebook::react::JSExecutor*)>::operator()[abi:v160006](facebook::react::JSExecutor*&&)
std::__1::__function::__func<facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$__1, std::__1::allocator<facebook::react::NativeToJsBridge::loadBundle(std::__1::unique_ptr<facebook::react::RAMBundleRegistry, std::__1::default_delete<facebook::react::RAMBundleRegistry> >, std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)::$__1&>, void (facebook::react::JSExecutor*)>::operator()(facebook::react::JSExecutor*&&)
std::__1::__function::__value_func<void (facebook::react::JSExecutor*)>::operator()[abi:v160006](facebook::react::JSExecutor*&&) const
std::__1::function<void (facebook::react::JSExecutor*)>::operator()(facebook::react::JSExecutor*) const
facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$__8::operator()() const
decltype(std::declval<facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$__8&>()()) std::__1::__invoke[abi:v160006]<facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$__8&>(facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$__8&)
void std::__1::__invoke_void_return_wrapper<void, true>::__call<facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$__8&>(facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$__8&)
std::__1::__function::__alloc_func<facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$__8, std::__1::allocator<facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$__8&>, void ()>::operator()[abi:v160006]()
std::__1::__function::__func<facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$__8, std::__1::allocator<facebook::react::NativeToJsBridge::runOnExecutorQueue(std::__1::function<void (facebook::react::JSExecutor*)>)::$__8&>, void ()>::operator()()
std::__1::__function::__value_func<void ()>::operator()[abi:v160006]() const
std::__1::function<void ()>::operator()() const
facebook::react::tryAndReturnError(std::__1::function<void ()> const&)
facebook::react::RCTMessageThread::tryFunc(std::__1::function<void ()> const&)
facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$__1::operator()() const
decltype(std::declval<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$__1&>()()) std::__1::__invoke[abi:v160006]<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$__1&>(facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$__1&)
void std::__1::__invoke_void_return_wrapper<void, true>::__call<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$__1&>(facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$__1&)
std::__1::__function::__alloc_func<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$__1, std::__1::allocator<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$__1&>, void ()>::operator()[abi:v160006]()
std::__1::__function::__func<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$__1, std::__1::allocator<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$__1&>, void ()>::operator()()
std::__1::__function::__value_func<void ()>::operator()[abi:v160006]() const
std::__1::function<void ()>::operator()() const
invocation function for block in facebook::react::RCTMessageThread::runAsync(std::__1::function<void ()>)
__CFRUNLOOP_IS_CALLING_OUT_TO_A_BLOCK__
__CFRunLoopDoBlocks
__CFRunLoopRun
CFRunLoopRunSpecific
+[RCTCxxBridge runRunLoop]
__NSThread__start__
_pthread_start
thread_start

已尝试的无效操作 #

• 清理构建文件夹
• 删除node_modules及package-lock.json后重新执行npm install
• 清除Xcode DerivedData
• 重新执行pod install

解决办法 #

这个错误是因为react-native-naver-map的iOS端代码重复注册了topClick事件，和React Native内置的事件冲突。试试以下方案：

方案1：修改组件原生代码 #

找到node_modules/react-native-naver-map/ios目录下的RCTNMapView.m或相关文件，查找注册topClick事件的代码，把事件名改成不冲突的（比如nmapTopClick），同时修改JS端对应的事件监听名称。

方案2：调整组件版本 #

查看react-native-naver-map的版本日志，找适配React Native 0.73.1的版本，要么升级到最新兼容版，要么降级到已知稳定的旧版本。

方案3：用patch-package打补丁 #

1. 安装工具：npm install patch-package --save-dev
2. 按方案1修改组件的iOS代码
3. 生成补丁：npx patch-package react-native-naver-map
4. 把生成的补丁文件提交到项目仓库，后续安装依赖时会自动应用这个补丁

内容的提问来源于stack exchange，提问作者김기범