React native-背景色仅覆盖屏幕的一半，如何解决？

Question

我是React Native的新手。最近，我将所有功能组件转换为类组件，然后重新运行代码-但现在背景色仅覆盖了一半的屏幕。 flexs：1在styles.container中，我尝试将容器的高度和宽度设置为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);

`1

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