React Native应用启动警告：函数组件返回类实例问题求助

警告原因 #

• 本质是某个被标记为<Unknown />的函数组件，返回了类组件的实例。React规定函数组件必须返回React元素（JSX）或null，直接返回new ClassComponent()这类实例会触发这个警告。
• 显示<Unknown />是因为React无法识别该组件的具体名称，大概率是组件用匿名函数定义、未正确导出，或者打包时被混淆了名称。

解决方法 #

标准修复方案（优先推荐） #

• 重构为类组件：如果这个组件原本就该是类组件，直接改成继承React.Component的类结构：

  // 错误示例：函数返回类实例
  function Unknown() {
    return new SomeClassComp();
  }
  
  // 正确示例：类组件
  class Unknown extends React.Component {
    render() {
      return <SomeClassComp />;
    }
  }
  

• 修正函数组件返回值：如果是函数组件，确保返回的是JSX元素而非类实例，把return new MyClass()改成return <MyClass />。

临时兼容方案（无法重构时使用） #

按照警告提示，给函数组件的原型赋值：

function Unknown() {
  // 组件逻辑，确保返回合法JSX
  return <View>...</View>;
}
// 添加这行消除警告
Unknown.prototype = React.Component.prototype;

另外，尽量给组件起明确名称，避免用export default () => {...}这类匿名组件，方便React识别组件名，也更容易排查问题。

内容的提问来源于stack exchange，提问作者Идентикон