如果你在开发 React Native 应用时遇到了一个组件,但是不知道它的名字,可以使用 React Native Debugger 中的'Dev Menu”功能来查看当前页面的组件树。
只需要在模拟器或真机中打开应用程序,然后用你的手机摇晃,或者使用电脑上的键盘快捷键 Command+d 或 Ctrl+m (Windows / Linux)打开开发菜单。在菜单中选择'Show Inspector”,这将打开 React Native Debugger。在'Hierarchy”选项卡中,你可以浏览组件树,并查看每个组件的名称和属性。
示例代码:
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class App extends Component {
render() {
return (
Hello World!
);
}
}
export default App;
假设你不知道
组件的名称。在 Dev Menu 中打开 React Native Debugger,进入'Hierarchy”选项卡,你应该能够看到一个名为'App”的组件。点击它后,你将看到它下面的
组件和
组件。现在你知道了这个组件的名称,可以在其他地方使用它。