React Native 自定义API组件import失败

随着React Native的发展,这种混合开发模式越来越受到Coder们的欢迎,但是,RN提供给我们供查询的资料仍然不多。题主作为一只入门的RN小白,经常遇到各种奇怪的Bug。在这里,我大概说明一下React Native在自定义组件时最容易进的坑——“RCTBridgeModule.h,RCTBrige.h文件找不到的Bug。

”话不多说,直接上图(以下示例均为iOS端):

按照RN官方文档的步骤,如果想要自定义一个RN API组件,首先需要自定义一个组件类,这很简单,就是这样,新建一个OC Class    (新建类都不会回家面壁去.......)

React Native 自定义API组件import失败_第1张图片
新建类

然后,按照文档,我们新建的模块类需要遵循RCTBridgeModule协议,并且需要包含“RCTBridgeModule.h”和“RCTBridge.h”头文件,就像这样


React Native 自定义API组件import失败_第2张图片
报错,file not found

这时候,我去检查了以下项目的第三方库连接情况,可以发现在React.a静态库是正常连接的,这时候如果去Finder中看一下,发现这两个RCT开头的头文件全部都在React项目中。


React Native 自定义API组件import失败_第3张图片
Link Binary With Libraries正常

ok,坑点来了,明明我是按照官方文档操作的,为什么报不存在呢???这时候我尝试了一下把React.xcodeproj工程完全导入到我的工程中去解决问题。这样虽然不会报头文件找不到,但是会报重复声明(不信的自己去试试)。

好了,现在重点来了,敲黑板!!正确的导入姿势是这样的:


React Native 自定义API组件import失败_第4张图片
正确姿势

React.a静态库已经被连接了,所以我们想要使用其中的头文件,只需要这样既可:


正确姿势

题主也是在AppDelegate.m中找到的灵感,既然我不会导入,我就看看系统生成的代码是怎么写的,AppDelegate.m中是这样写的:


React Native 自定义API组件import失败_第5张图片
自动生成代码

OK,到这里,这个自定义API组件import文件失败的Bug就解决了,又可以愉快地解决下一个Bug了吸吸吸。。。(第一次写文章有点紧张,若有不妥还请指正啦~~)

你可能感兴趣的:(React Native 自定义API组件import失败)