web-dev-qa-db-fra.com

Centrer un texte sur l’écran avec react native

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>

reactjsreact-native
6
user567

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>

 Your centered text

6
Hernán Albertario

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

0
Amr Labib