如何在调用requireNativeComponent前检测Native UI组件是否存在？

这个问题我之前也踩过坑，确实try/catch在这里起不了作用——因为requireNativeComponent的错误是在模块加载阶段就抛出的，不属于运行时可捕获的错误类型。下面给你几个实用的检测方法：

1. 利用UIManager检查已注册的ViewManager #

React Native所有原生UI组件都会注册对应的ViewManager，我们可以通过UIManager.getViewManagerConfig来判断组件是否存在：

import { UIManager, requireNativeComponent, Platform, View, Text } from 'react-native';

const isComponentAvailable = (componentName) => {
  try {
    // 跨平台通用：获取组件的配置信息，不存在则返回undefined
    const config = UIManager.getViewManagerConfig(componentName);
    return !!config;
  } catch (err) {
    // 兼容某些特殊场景下的异常
    console.warn(`Failed to check component ${componentName}:`, err);
    return false;
  }
};

// 使用示例
const MyCustomComponent = isComponentAvailable('MyNativeView') 
  ? requireNativeComponent('MyNativeView') 
  : () => (
      <View style={{backgroundColor: '#eee', padding: 16, borderRadius: 8}}>
        <Text>Native component not available</Text>
      </View>
    );

这个方法是最直接的，不管是iOS还是Android，只要原生组件正确注册，UIManager里就会有它的配置信息。

2. 针对TurboModule（新架构）注册的组件 #

如果你的原生组件是通过TurboModule（React Native新架构）注册的，可以用TurboModuleRegistry来检查对应的模块是否存在：

import { TurboModuleRegistry } from 'react-native';

// 检查对应的TurboModule是否存在
const isTurboModuleAvailable = (moduleName) => {
  try {
    const module = TurboModuleRegistry.getEnforcing(moduleName);
    return !!module;
  } catch (err) {
    return false;
  }
};

// 如果组件和模块绑定，就可以通过模块存在性推断组件可用性
const isMyComponentAvailable = isTurboModuleAvailable('MyCustomTurboModule');

关键提醒：为什么try/catch没用？ #

requireNativeComponent本质上是在模块加载时就去查找对应的原生ViewManager，这个过程发生在代码执行前的模块解析阶段，所以即使你把requireNativeComponent放在try/catch里，也捕获不到这个阶段的错误。必须先检测再调用，才能避免触发错误。

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