Реагируйте родной - цвет фона покрывает только половину экрана, как исправить? - PullRequest
Новая
       28

Реагируйте родной - цвет фона покрывает только половину экрана, как исправить?

0 голосов
/ 29 февраля 2020

Я новичок в React Native. Я недавно преобразовал все свои функциональные компоненты в компоненты класса и заново запустил мой код - но теперь цвет фона покрывает только половину экрана. flex: 1 в файле styles.container, и я попытался установить высоту и ширину контейнера на 100% в случае, если это вызвало ошибку. Но, оказывается, он остается прежним. Как я могу это исправить ? [Background-color only covering half the screen !``] `const styles = StyleSheet.create ({container: {flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '# d6ffff', высота:" 100% ", ширина:" 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

1 Ответ

0 голосов
/ 29 февраля 2020 
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,
  }
})
...