Je suis nouveau dans React Native. J'ai récemment converti tous mes composants fonctionnels en composants de classe et relancé mon code - mais maintenant la couleur d'arrière-plan ne couvre que la moitié de l'écran. flex: 1 dans le styles.container et j'ai essayé de définir la hauteur et la largeur du conteneur à 100% au cas où cela provoquait l'erreur. Mais il s'avère que cela reste le même. Comment puis-je réparer ça? 
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);
3 Réponses :
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,
}
})
Hé merci, cela a résolu le problème pour la moitié des pages - maintenant en plein écran, mais pour les autres, il est toujours à moitié. mais merci !
Salut, pourquoi utiliser la hauteur et la largeur au lieu de simplement flex: 1? Cela devrait fonctionner et couvrir tout votre écran, non?
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#d6ffff',
}
})
En général, les réponses sont beaucoup plus utiles si elles incluent une explication de ce que le code est censé faire et pourquoi cela résout le problème sans en présenter d'autres.
La réponse fournie a été signalée pour examen comme un message de faible qualité. Voici quelques conseils pour Comment rédiger une bonne réponse? . Cette réponse apportée pourrait bénéficier d'une explication. Les réponses codées uniquement ne sont pas considérées comme de «bonnes» réponses. À partir de Review .
Je pense que vous n'avez pas besoin de propriétés de largeur et de hauteur:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#d6ffff',
}
})
Si possible, pourriez-vous partager votre code source.
Essayez d'ajouter display: 'flex' à la classe de conteneur.
@MazharHaque l'a ajouté, montre la même chose
@SDushan, montrant - un moment
@SDushan s'il vous plaît voir la question modifiée - iv mis dans mon extrait de code