J'essaie de centrer un texte verticalement et horizontalement sur l'écran. C'est mon code
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text> Header </Text>
</View>
<Text style={styles.text}> some text in the middle center of the screen </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor:'white',
alignItems:'center',
justifyContent:'center'
},
header: {
backgroundColor: 'green',
alignSelf: 'stretch',
alignItems: 'center',
heigth: 80 // this dose not change the header height
},
text:{
//flex: 1,
justifyContent:'center',
}
});
Si j'ajoute le flex: 1 au texte, l'en-tête sera également centré, ce qui n'est pas prévu. Je ne sais pas si c'est lié, mais je ne peux pas non plus modifier la hauteur de la vue d'en-tête. Comment puis-je résoudre ça? Les problèmes peuvent être reproduits sur cette collation .
<div data-snack-id="S1urACbJM" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.16);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>
C'est une façon de centrer le texte à l'écran:
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'blue'
}}>
<Text style={{backgroundColor: 'red'}}>
Your Text
</Text>
</View>
Et vous pouvez aussi essayer avec position: 'absolute':
<View style={{
backgroundColor: 'blue',
position: 'absolute',
top: 0, left: 0,
right: 0, bottom: 0,
justifyContent: 'center',
alignItems: 'center'}}>
<Text style={{backgroundColor: 'red'}}> Your Text </Text>
</View>
Je suggère de définir l'en-tête en tant que position:'absolute'
et d'utiliser flex:1
et justify-content:'center'
sur le conteneur.
Vérifiez le style mis à jour
const styles = StyleSheet.create({
container: {
backgroundColor:'white',
alignItems:'center',
justifyContent:'center',
flex:1,
paddingTop:20 //this amount should be equal to the header height so that any items displayed inside the container will start after the absolute positioned header
},
header: {
backgroundColor: 'green',
alignSelf: 'center',
justifyContent:"flex-start",
alignItems: 'center',
position:"absolute",
top:0
}
});
En ce qui concerne la hauteur, vous avez juste une faute de frappe dans le mot height