如何在检查React Native元素时显示组件名称？

• 给自定义组件添加displayName
  React DevTools会优先读取组件的displayName属性，而非默认的原生容器名称。你可以手动给组件赋值：

  // 函数组件
  const ProfileCard = () => <View />;
  ProfileCard.displayName = 'ProfileCard';
  
  // 类组件
  class SettingsScreen extends Component {
    static displayName = 'SettingsScreen';
    render() {
      return <View />;
    }
  }
  

• 用React Native Debugger过滤原生组件
  打开React Native Debugger后，在组件面板顶部勾选「Hide Native Elements」，就能直接隐藏iOS原生组件，只展示你自己定义的React组件，组件名称会清晰显示在树结构里。

• 启用Babel自动生成displayName
  安装并启用@babel/plugin-transform-react-display-name插件，它会自动给组件添加displayName，不用手动编写。在babel.config.js里配置：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: ['@babel/plugin-transform-react-display-name']
  };
  

• 检查调试模式的启动方式
  确保启动项目时开启了完整的调试模式，运行npx react-native start后，在模拟器里打开调试菜单（iOS按Cmd+D），选择「Debug」，此时React DevTools会正确关联到你的React组件树，而非仅显示原生元素。

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