时间戳

首页 > 解决方案 > 在 UIManager 中找不到本机组件

react-native - 在 UIManager 中找不到本机组件

问题描述

我正在尝试构建一个反应原生组件，但我陷入了以下错误：

不变违规：requireNativeComponent：在 UIManager 中找不到“RNMyComponent”。

我相信自己走在正确的道路上，但仍然缺少一些东西。在我在一些示例中遵循了如此多的命名更改和构建尝试之后，我不知道问题是代码还是某种缓存。

为了避免某种缓存问题，我总是运行以下命令。

rm -rf ios/build
rm -rf android/app/build
rm -rf ~/Library/Developer/Xcode/DerivedData
rm -rf lib
watchman watch-del-all
rm -rf node_modules package-lock.json
npm cache verify
npm install
rm -rf $TMPDIR/react-*
rm -rf $TMPDIR/react-packager-*
rm -rf $TMPDIR/haste-map-react-native-packager-*
rm -rf $TMPDIR/metro-cache-react-native-packager-*
rm -rf $TMPDIR/metro-bundler-cache-*
rm -rf ios/Pods Podfile.lock
cd ios && pod install
react-native link

但即便如此，它总是会得到上面相同的错误。

按照我的 react-native 组件的代码

RNMyComponent.h

#import <React/RCTViewManager.h>

@interface RNMyComponent : RCTViewManager

@end

RNMyComponent.m

#import "RNMyComponent.h"

#import <React/RCTUIManager.h>
#import <React/RCTLog.h>

#import "RNMyComponentView.h"

@implementation RNMyComponent

RCT_EXPORT_MODULE()

- (UIView *)view
{
  return [RNMyComponentView new];
}

@end

RNMyComponentView.h

#import <UIKit/UIKit.h>
#import <React/RCTView.h>
#import <REact/RCTUIManager.h>

@interface RNMyComponentView : UIView

@end

RNMyComponentView.m

#import "RNMyComponentView.h"
#import <React/RCTLog.h>

@implementation RNMyComponentView

@end

index.js

module.exports = {
  get MyComponent() {
    return require('./RNMyComponent').default;
  },
};

RNMyComponent.js

class MyComponent extends Component {
  render() {
    return (
      <RNMyComponent />
    );
  }
}

const RNMyComponent = requireNativeComponent('RNMyComponent', MyComponent);

export default MyComponent;

...以及我如何调用组件

import { MyComponent } from 'react-native-my-component';
<MyComponent />

"react-native": "^0.60.5",

标签： react-nativereact-native-component

解决方案

创建反应原生模块时，在 ios 内部有这个“RNTheModule.podspec”。我所做的是将它移到根目录并更改为与我的模块相同的名称（在 package.json 中）。所以应该是：

- root
-- the-module.podspec
- ios
- android
- ...

推荐阅读