Question

我正在尝试创建一个简单的React Native模块，它包装了一个原生的iOS组件（Stripe SDK）。我按照instructions并将我的代码基于现有的可正常运行的组件react-native-facebook-login。

每当我尝试将我的组件包含在React Native中时，我都会收到这个神秘的警告：

Warning: Native component for "RCTStripe" does not exist

该组件确实存在。我为它创建了一个iOS库，其RCTStripeManager.m/h继承自RCTViewManager。 RCTStripe继承自RCTView并由管理员等初始化并返回。所有这些都是在另一个完美运行的模块上建模的。

发生了什么？

以下是一些示例代码：

RCTStripeManager.h

#import "RCTViewManager.h"

@interface RCTStripeManager : RCTViewManager

@end

RCTStripeManager.m

#import "RCTBridge.h"
#import "RCTEventDispatcher.h"
#import "RCTLog.h"

#import "RCTStripe.h"
#import "RCTStripeManager.h"

@implementation RCTStripeManager
{
    RCTStripe *_stripe;
}

@synthesize bridge = _bridge;

- (UIView *)view
{
    _stripe = [[RCTStripe alloc] init];
    return _stripe;
}

- (dispatch_queue_t)methodQueue
{
    return dispatch_get_main_queue();
}

RCT_EXPORT_MODULE();

@end

RCTStripe.h

#import "RCTView.h"

@interface RCTStripe : RCTView

@end

RCTStripe.m

#import <Stripe/Stripe.h>

#import "RCTStripe.h"
#import "RCTLog.h"

@implementation RCTStripe

- (id)init
{
  if ((self = [super init])) {
      // init code here
      UILabel *myLabel = [[UILabel alloc] init];
      [myLabel setText:@"Hello world"];
      [self addSubview:myLabel];
  }

  return self;
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    RCTAssert(self.subviews.count == 1, @"we should only have exactly one subview");
}

- (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex
{
    RCTLogError(@"FBLoginButton does not support subviews");
    return;
}

- (void)removeReactSubview:(UIView *)subview
{
    RCTLogError(@"FBLoginButton does not support subviews");
    return;
}

- (NSArray *)reactSubviews
{
    return @[];
}

@end

index.ios.js

var React = require('react-native');
var {
  StyleSheet,
  NativeModules,
  requireNativeComponent,
  NativeMethodsMixin,
} = React;

var { StripeManager } = NativeModules;

var SuperStripe = React.createClass({

  mixins: [NativeMethodsMixin],

  render: function() {
    var props = {
      ...this.props,
      style: ([styles.base, this.props.style]),
    };

    return <RCTStripe {...props} />
  },
});

var RCTStripe = requireNativeComponent('RCTStripe', SuperStripe);

var styles = StyleSheet.create({
  base: {
    width: 300,
    height: 300,
  },
});

module.exports = SuperStripe;

完整代码位于https://github.com/lrettig/react-native-stripe。在example/目录中，运行npm install和npm start，然后打开example/ios/example.xcodeproj并运行它。

感谢。

Answer 1

事实证明这是因为我开始使用具有不同名称的现有模块，并且我重命名了Xcode项目。当我重命名Xcode项目时，出于某种原因，它从＆＃34; Link Binary with Libraries＆＃34;中删除了模块项目（RCTStripe）。父（样本）项目的构建阶段的一部分，因此代码根本没有运行。添加它修复此问题。

Answer 2

发生此错误的另一种情况是在安装新的本机软件包时。

请确保：

运行纱线：纱线安装
运行cocoapods：在/ios文件夹中 pod安装
通过XCode / Android Studio或yarn start命令再次构建应用。

＆＃34;警告：<component>的原生组件不存在＆＃34;在新的React Native组件

2 个答案: