11、React Native 开发调试与测试全解析

React Native 开发调试与测试全解析

1. React Native 组件命名与调试工具

1.1 组件命名

在 React Native 中，为了让 React Developer Tools 能正确识别组件名称，若按 export default ComponentName; 定义组件，在 React Native 里可能无效，需显式设置 displayName ：

import React from 'react-native';
var ComponentName = React.createClass({
  displayName: 'ComponentName',
  // 其他代码
});
export default ComponentName;

这样 React Developer Tools 就能正常解析组件层次结构。

1.2 React Native 调试工具

除常见基于 JavaScript 的 Web 调试工具外，React Native 还有特定调试功能。
- 使用 Inspect Element ：可通过浏览器使用 React 开发者工具，但“检查元素”功能可能不够理想。应用内的“检查元素”功能很有用，能查看样式等信息，快速查看组件层次结构，还会显示一些基本性能指标。
- 红色死亡屏幕（The Red Screen of Death）