React Native-全新的应用程序仅显示黑屏。如何调试?

时间:2019-02-03 16:20:38

标签: android ios reactjs react-native

即使在阅读了许多教程之后,我仍在开始探索如何使用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应用程序(热重装并不总是有效),以查看应用程序中的新代码更改,而不是构建一些新功能。

我在根本上做错了什么吗(例如使用错误的开发工具)?

1 个答案:

答案 0 :(得分:0)

如果您查看AppDelegate.m,将会看到rootView的颜色设置如下

rootView.backgroundColor = [UIColor blackColor];

这会将默认颜色设置为黑色,您可以将其更改为所需的任何颜色。

但是,它不会影响您在Android上执行的任何操作,因此最好只在View中设置backgroundColor。