100% de largeur dans React Native Flexbox


203

J'ai déjà lu plusieurs tutoriels flexbox, mais je n'arrive toujours pas à faire fonctionner cette tâche simple.

Comment puis-je rendre la boîte rouge à 100% de largeur?

entrez la description de l'image ici

Code:

  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Natives
    </Text>
    <Text style={styles.line1}>
      line1
    </Text>
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
  </View>

style:

container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF',
  borderWidth: 1,
  flexDirection: 'column',
},
welcome: {
  fontSize: 20,
  textAlign: 'center',
  margin: 10,
  borderWidth: 1,
},
line1: {
    backgroundColor: '#FDD7E4',
},
instructions: {
  textAlign: 'center',
  color: '#333333',
  marginBottom: 5,
  borderWidth: 1,
},

Je vous remercie!

Mise à jour 1: suggestion de Nishanth Shankar, ajout de flex: 1 pour le wrapper, flexDirection: 'row'

Production:

entrez la description de l'image ici

Code:

  <View style={styles.container}>
    <View style={{flex:1}}>
      <Text style={styles.welcome}>
        Welcome to React Natives
      </Text>
    </View>
    <View style={{flex:1}}>
      <Text style={styles.line1}>
        line1
      </Text>
    </View>
    <View style={{flex:1}}>
      <Text style={styles.instructions}>
        Press Cmd+R to reload,{'\n'}
        Cmd+D or shake for dev menu
      </Text>
    </View>
  </View>

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    borderWidth: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    borderWidth: 1,
  },
  line1: {
      backgroundColor: '#FDD7E4',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    borderWidth: 1,
  },

Réponses:


414

Ajoutez simplement alignSelf: "stretch"à la feuille de style de votre article.

line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
},

9
Le lien est rompu.
Lukas Knuth

2
En utilisant alignSelf stretch, j'ai eu un problème avec Android - j'avais une image avec une position `` absolue '' et dans ce cas, même en utilisant `` stretch '', une telle boîte est rembourrée jusqu'au bord des éléments contenus à l'intérieur. Dimensions.get ('window'). Width fonctionnait à la fois sur iOS et Android dans mon cas.
st_bk

Cette solution a résolu tous mes problèmes de «pleine largeur», consultez-la: snack.expo.io/S1PWQqkcZ
webdevinci

1
Il semble que cela width: "100%"devrait aussi fonctionner mais ça ne marche pas. Je pense que je ne comprends pas quand alignSelf: "stretch"fonctionne vs width: "100%". @Corentin des idées? THX!
Joel

4
@st_bk y a sauvé la vie! Cependant, j'ai trouvé une meilleure solution pour l'événement que vous vous positionnez absolument et que vous devez vous étirer:position: absolute, top: 0, bottom: 0, left: 0, right: 0
lance.dolan

119

Vous devez utiliser Dimensions

Définissez d'abord les dimensions.

import { Dimensions } from "react-native";

var width = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height

puis changez de line1style comme ci-dessous:

line1: {
    backgroundColor: '#FDD7E4',
    width: width,
},

3
thx Melih Mucuk! alignSelf: "stretch" suggéré par Corentin S. est le plus simple et le plus simple, j'ai donc accepté cette réponse. Cependant, avoir Dimensions me conduit à une nouvelle façon de jouer autour de la mise en page. Dans certains cas, nous pourrions ajuster les éléments par programme, merci!
franfran

1
@Melih Je trouve que la largeur retournée est incorrecte sur mon appareil Android. La bonne largeur devrait être 720px, mais 360px revient.
peacepassion

4
@peacepassion, vous avez 360, car le dpi de votre appareil est mis à l'échelle 2x. Essayez Dimensions.get('window').scale- cela devrait renvoyer 2 dans votre cas.
matusalem

Merci pour votre réponse, j'ai affaire à un conteneur avec un fond et votre suggestion s'intègre parfaitement.
clarenswd

7
Cela ne fonctionnera pas lorsque l'appareil est tourné. Il est préférable d'utiliser une disposition adaptative.
laynemoseley

26

Modifié:

Afin de fléchir uniquement le texte central, une approche différente peut être adoptée - Détachez les autres vues.

  • Laissez flexDirection rester dans la «colonne»
  • retirer le alignItems : 'center'contenant
  • ajouter alignSelf:'center'aux vues de texte que vous ne souhaitez pas modifier

Vous pouvez encapsuler le composant Texte dans un composant Vue et donner à la Vue un flex de 1.

Le flex donnera:

100% de largeur si le flexDirection:'row'dans styles.container

100% de hauteur si le flexDirection:'column'dans styles.container


oui, j'ai essayé de définir flexDirection: 'row' et flex: 1 pour que la largeur passe à 100%. Cependant, les composants sont tous en ligne et ne peuvent pas passer à la ligne suivante. même j'ai utilisé flexWrap: 'wrap'
franfran

une chance avec la nouvelle méthode franfran?
Nishanth Shankar

l'alignSelf: 'stretch' suggéré par les travaux de Corentin S.
franfran

8

Voici:

Modifiez simplement le style line1 comme ci-dessous:

line1: {
    backgroundColor: '#FDD7E4',
    width:'100%',
    alignSelf:'center'
}

6

Utilisez javascript pour obtenir la largeur et la hauteur et ajoutez-les dans le style de View. Pour obtenir la largeur et la hauteur complètes, utilisez Dimensions.get('window').width https://facebook.github.io/react-native/docs/dimensions.html

getSize() {
    return {
        width: Dimensions.get('window').width, 
        height: Dimensions.get('window').height
    }
}

puis,

<View style={[styles.overlay, this.getSize()]}>

Ooh, j'aime ça. Ce n'est peut-être pas la meilleure solution, mais cela a résolu mon problème. Sans oublier que c'est une fonction assez soignée en général.
Kevin Østerkilde

5

Ajoutez d'abord le composant Dimension:

import { AppRegistry, Text, View,Dimensions } from 'react-native';

Deuxième définition des variables:

var height = Dimensions.get('window').height;
var width = Dimensions.get('window').width;

Troisièmement, mettez-le dans votre feuille de style:

textOutputView: {
    flexDirection:'row',
    paddingTop:20,
    borderWidth:1,
    borderColor:'red',
    height:height*0.25,
    backgroundColor:'darkgrey',
    justifyContent:'flex-end'
}

En fait, dans cet exemple, je voulais faire une vue réactive et je ne voulais voir que 0,25 de la vue d'écran, donc je l'ai multiplié par 0,25, si vous vouliez 100% de l'écran, ne le multipliez pas avec quelque chose comme ça:

textOutputView: {
    flexDirection:'row',
    paddingTop:20,
    borderWidth:1,
    borderColor:'red',
    height:height,
    backgroundColor:'darkgrey',
    justifyContent:'flex-end'
}

2

Noté: Essayez de bien comprendre le concept de flex.

       <View style={{
          flex: 2,
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <View style ={{
              flex: 1,
              alignItems: 'center, 
              height: 50, 
              borderWidth: 1, 
              borderColor: '#000' 
          }}>
               <Text>Welcome to React Nativ</Text>
           </View>
           <View style={{
              flex: 1,
              alignItems: 'center,
              borderWidth: 1, 
              borderColor: 'red ', 
              height: 50
            }}
            >
              <Text> line 1 </Text>
            </View>
          <View style={{
            flex: 1,
            alignItems: 'center, 
            height: 50, 
            borderWidth: 1,                     
            borderColor: '#000'
          }}>
             <Text>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
             </Text>
           </View>
       </View>

1

il suffit de supprimer les alignItems: 'center'styles de conteneur et d'ajouter textAlign: "center"au line1style comme indiqué ci-dessous.

Cela fonctionnera bien

container: {
  flex: 1,
  justifyContent: 'center',
  backgroundColor: '#F5FCFF',
  borderWidth: 1,
}

line1: {
    backgroundColor: '#FDD7E4',
    textAlign:'center'
},

1
Style ={{width : "100%"}}

essaye ça:

StyleSheet generated: {
  "width": "80%",
  "textAlign": "center",
  "marginTop": 21.8625,
  "fontWeight": "bold",
  "fontSize": 16,
  "color": "rgb(24, 24, 24)",
  "fontFamily": "Trajan Pro",
  "textShadowColor": "rgba(255, 255, 255, 0.2)",
  "textShadowOffset": {
    "width": 0,
    "height": 0.5
  }
}

Veuillez fournir une réponse appropriée à la question. Ne fournissez pas de lien sans d'abord expliquer ici de quoi il s'agit.
Akaisteph7

-1

width: '100%'et alignSelf: 'stretch'n'a pas fonctionné pour moi. Dimensionsn'a pas adapté ma tâche car j'avais besoin d'opérer sur une vue profondément imbriquée. Voici ce qui a fonctionné pour moi, si je réécris votre code. J'ai juste ajouté quelques propriétés supplémentaires Viewet utilisé flexpour obtenir la disposition requise:

  {/* a column */}
  <View style={styles.container}>
    {/* some rows here */}
    <Text style={styles.welcome}>
      Welcome to React Natives
    </Text>
    {/* this row should take all available width */}
    <View style={{ flexDirection: 'row' }}>
      {/* flex 1 makes the view take all available width */}
      <View style={{ flex: 1 }}>
        <Text style={styles.line1}>
          line1
        </Text>
      </View>
      {/* I also had a button here, to the right of the text */}
    </View>
    {/* the rest of the rows */}
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
  </View>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.