Reactjs 反应本色-背景色只覆盖半个屏幕，如何修复？

我是个新来的本地人。我最近将所有功能组件转换为类组件，并重新运行代码，但现在背景色只覆盖了屏幕的一半。flex:1在styles.container中，我尝试将容器的高度和宽度设置为100%，以防导致错误。但事实证明，它保持不变。我该如何解决这个问题

const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#d6ffff”，
高度：“100%”，
宽度：“100%”
}
类登录扩展了React.Component{
render（）{
返回(
登录
this.props.navigation.navigate（'main menu'）}/>
); 
}
}
const RootStack=createStackNavigator(
{
登录：登录
}
);
导出默认createAppContainer（根堆栈）；

我认为您不需要设置宽度和高度属性：

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#d6ffff',
  }
})

---

如果可能，您可以共享您的源代码。尝试向容器类添加display:“flex”。@MazharHaque添加了它，显示same@SDushan，显示-1moment@SDushan请看编辑后的问题-我的代码片段中的第四个问题嘿，谢谢，它解决了一半页面的问题-现在全屏显示，但其他页面仍然是一半。但是，谢谢！嗨，为什么要使用高度和宽度，而不是仅仅使用flex:1？它应该可以工作并覆盖所有屏幕不？一般来说，如果答案包括对代码意图的解释，以及为什么在不介绍其他内容的情况下解决问题，那么答案会更有帮助。提供的答案被标记为低质量帖子供审查。她e是一些指南。提供的答案可以从解释中受益。仅代码答案不被视为“好”答案。来源。

import {Dimensions, StyleSheet} from 'react-native';

{
   .... Your code
}

const styles = StyleSheet.create({
  container: {
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#d6ffff',
      height: Dimensions.get('window').height,
      width: Dimensions.get('window').width,
  }
})

const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: '#d6ffff',
  }
})

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#d6ffff',
  }
})