React Native 升级 Fabric 后自定义组件不渲染怎么办？

Good“瑞静提问于 2026-03-20 12:44:25 阅读 64

框架

我最近把项目从旧架构迁移到 React Native 的新 Fabric 架构，结果之前写的原生自定义组件完全不显示了，控制台也没报错，这到底该怎么排查？

我在 Android 上用的是 ViewManager + SimpleViewManager 的方式注册的组件，在 JS 侧是这么调用的：

<template>
  <view>
    <my-native-button title="点击我" />
  </view>
</template>

<script>
export default {
  name: 'TestPage'
}
</script>

以前在 Paper 架构下能正常显示，现在换成 Fabric 就空白了，是不是要改组件的导出方式或者桥接逻辑？

组件设计

我来解答赞 18 收藏

反馈

2 条解答

可馨 Dev Lv1

遇到这个问题，首先得检查一下 Fabric 架构下的自定义组件注册和使用是否正确。Fabric 引入了一些变化，特别是对于自定义组件的处理。

首先，确保你的自定义组件在 Fabric 下正确注册。在 Java 或 Kotlin 代码里，你可能需要更新 ViewManager 的实现方式。Fabric 推荐使用 FabricViewManager 和 FabricViewGroupManager 来替代 SimpleViewManager，不过有时候 SimpleViewManager 也能继续工作，但最好还是迁移到新的 API。

其次，检查 JS 端的组件注册。确保你正确地将原生组件导入到 JS 文件中，并且使用了正确的名称。在 Fabric 中，JS 组件名称通常是驼峰式，而原生端的组件名称通常是 PascalCase。确保两者匹配。

这里有一个简单的示例，展示如何在 JS 端正确引入和使用原生组件：

pre class="pure-highlightjs line-numbers">

import { requireNativeComponent } from 'react-native';



const MyNativeButton = requireNativeComponent('MyNativeButton');



export default function TestPage() {

  return (

    

      

    

  );

}

注意这里的 requireNativeComponent 调用，确保传入的字符串与原生端注册的组件名称一致。

此外，检查一下你的原生模块是否正确实现了 Fabric 所需的接口。有时候，仅仅是因为某个方法没有正确实现就会导致组件无法渲染。

最后，别忘了清理构建缓存并重新编译项目。有时候，缓存可能导致一些奇怪的问题。可以在终端中运行 npx react-native start --reset-cache 来重置缓存。

这些步骤应该能帮你解决大部分问题。记得在调试过程中保持耐心，一步一步来。希望一切顺利！

2026-03-24 15:09

娇娇 Dev Lv1

Fabric 改动挺大的，试试在 ViewManager 里实现 getName 和 createViewInstance 方法，JS 端调用也得改成，应该能用

2026-03-20 15:06