React Native组件既用于导航又内联使用报错求助

嘿，我来帮你梳理下这个问题的原因和解决办法～

错误原因 #

你碰到的Invariant Violation错误，本质是组件导入方式不匹配：

• 在MyComp.js里，你用的是export default class MyComp——这是默认导出的语法，整个文件对外暴露的默认内容就是这个组件；
• 但在Home.js中，你写了import {MyComp} from "./MyComp";——这是命名导入的写法，它会尝试从MyComp.js中找一个叫MyComp的命名导出项，可实际上这个文件根本没有命名导出，所以最终你拿到的MyComp是undefined，React自然无法识别这个无效的元素类型，就抛出了错误。

组件能否同时支持两种使用方式？ #

完全可以！React Native组件没有限制只能以一种方式使用，它既可以作为导航栈里的独立屏幕，也能作为子组件内联渲染在其他组件中，只要写法和导入逻辑正确就行。

修复步骤 #

只需要修改Home.js里的导入语句，把命名导入改成默认导入：

// 替换Home.js中原来的导入代码
import MyComp from "./MyComp";

修改完成后，你再运行代码就会发现：点击按钮可以正常导航到MyComp页面，同时Home组件里的<MyComp/>也能正常渲染了。

内容的提问来源于stack exchange，提问作者chris01