反应原生背景颜色仅覆盖一半屏幕，如何解决？答案

【问题标题】：React native - background color covering only half the screen , how to fix?反应原生背景颜色仅覆盖一半屏幕，如何解决？
【发布时间】：2020-02-29 07:59:59
【问题描述】：

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

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#d6ffff',
      height: "100%",
      width: "100%"
  }

     class Login extends React.Component {
            render() {
          return (
            <View style={styles.container}>
              <Text style={styles.heading} > Login </Text>
            <TextInput
              style={styles.input}
              underlineColorAndroid="transparent"
              placeholder="Email"
              placeholderTextColor="#00bcd4"
              autoCapitalize="none"
            />
            <TextInput
              style={styles.input}
              underlineColorAndroid="transparent"
              placeholder="Password"
              placeholderTextColor="#00bcd4"
              autoCapitalize="none"
              secureTextEntry={true}
            />
                <Button 
                  title="Login" 
                  color='#00bcd4' 
                  onPress={() => this.props.navigation.navigate('MainMenu')} />
            </View>
           ); 
         }
        }
    const RootStack = createStackNavigator(
      {
        Login: Login
      }
    );
    export default createAppContainer(RootStack);

【问题讨论】：

如果可能的话，您能否分享您的源代码。
尝试将 display: 'flex' 添加到容器类中。
@MazharHaque 添加它，显示相同
@SDushan，显示 - 一会儿
@SDushan 请查看已编辑的问题 - iv 输入我的代码 sn-p

标签： reactjs react-native react-native-android stylesheet background-color

【解决方案1】：

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,
  }
})

【讨论】：

嘿，谢谢，它解决了一半页面的问题 - 现在进入全屏，但其他页面仍然是一半。但是，谢谢！
嗨，为什么要使用高度和宽度，而不仅仅是 flex:1 ？它应该可以工作并覆盖您的所有屏幕吗？

【解决方案2】：

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

【讨论】：

一般来说，如果答案包含对代码的用途的解释，以及为什么在不介绍其他人的情况下解决问题的原因，答案会更有帮助。
所提供的答案被标记为低质量帖子以供审核。以下是How do I write a good answer? 的一些指南。这个提供的答案可以从解释中受益。仅代码答案不被视为“好”答案。来自Review。

【解决方案3】：

我认为你不需要宽度和高度属性：

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

【讨论】：