React Native - 一款全新的应用程序只显示黑屏。 如何进行调试？

Question

我开始探索使用React Native构建移动应用程序并运行，即使经过了许多教程，仍然遇到了重复的问题。

我通过react-native init MyApp命令生成了一个新的应用程序 - 我注意到在App.js文件中包含了这些样式定义：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

然而，如果我决定仅使用

export default class App extends Component {
  render() {
    return (
      <View>
        <Header />
      </View>
    );
  }
}

在模拟器中，我只能看到黑屏 - 要想“看到”什么东西，我需要添加样式定义，如下：

<View style={styles.container}>
  <Header />
</View>

如何避免每次都要指定<View>的样式定义?屏幕背景默认是黑色还是我忽略了些什么?

到目前为止，开发非常混乱和困难，我基本上花了整个下午重新启动iOS应用程序（热重载并不总是起作用），以查看应用程序中的新代码更改，而不是构建一些新功能。

我是否在做一些根本性错误（比如使用错误的开发工具）？

- user984621

Answer 1

如果你查看 AppDelegate.m 文件，你会发现 rootView 的颜色设置如下：

rootView.backgroundColor = [UIColor blackColor];

这将默认颜色设置为黑色，您可以将其更改为任何您想要的颜色。但是，在Android上所做的任何操作都不会受到影响，因此最好在View中设置您的backgroundColor。

- Andrew

---

谢谢，我找到了 - 我记得去年夏天我在玩RN，自那以后很多东西都改变了...我可以问你一些调试技巧吗？到目前为止，它更像是一个黑匣子，我花了很多时间打开和关闭应用程序（=花费更多的时间和重新启动应用程序，而不是实际构建任何功能）。 - user984621

我发现热重载只有在你不编辑状态时才有用。否则你需要重新加载。有两种重新加载的方式：CMD+R或react-native run-ios。我通常使用CMD+R来刷新设备上的捆绑包。如果我对本地代码进行了更改，安装了新的依赖项，则使用react-native run-ios更新捆绑包是最好的选择，然后我可以回到使用CMD+R。 - Andrew

你还应该使用 react-native-debugger，它比在 Chrome 浏览器中使用窗口更好。https://github.com/jhen0409/react-native-debugger - Andrew

谢谢，我会查看的。 - user984621

react-native-debugger 的好处在于，如果你稍微调整一下中间件并开始使用 redux，你就可以在调试器中看到你的 redux 状态和操作。 - Andrew