Larghezza 100% in React Native Flexbox


203

Ho già letto diversi tutorial su flexbox, ma non riesco ancora a far funzionare questa semplice operazione.

Come posso rendere la scatola rossa al 100% di larghezza?

inserisci qui la descrizione dell'immagine

Codice:

  <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>

stile:

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,
},

Grazie!

Aggiornamento 1: Suggerimento di Nishanth Shankar, aggiunta di flex: 1 per il wrapper, flexDirection: 'row'

Produzione:

inserisci qui la descrizione dell'immagine

Codice:

  <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,
  },

Risposte:


414

Aggiungi semplicemente alignSelf: "stretch"al foglio di stile del tuo articolo.

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

9
Il collegamento è interrotto.
Lukas Knuth,

2
Usando alignSelf stretch, ho avuto un problema con Android: avevo un'immagine con posizione 'assoluta' e in questo caso, anche usando 'stretch', tale casella viene riempita fino al bordo degli elementi contenuti all'interno. Dimensions.get ('window'). Width ha funzionato sia su iOS che su Android nel mio caso.
st_bk,

In questo modo ho risolto tutti i miei problemi "a tutta larghezza", dai un'occhiata: snack.expo.io/S1PWQqkcZ
webdevinci

1
Sembra che width: "100%"dovrebbe funzionare anche ma non funziona. Penso che non capisco quando alignSelf: "stretch"funziona vs width: "100%". @Corentin qualche idea? Grazie!
Gioele,

4
@st_bk è stato un salvavita lì! Tuttavia, ho trovato una soluzione migliore per l'evento che stai assolutamente posizionando e devi allungare:position: absolute, top: 0, bottom: 0, left: 0, right: 0
lance.dolan

119

È necessario utilizzare le dimensioni

Innanzitutto, definire le dimensioni.

import { Dimensions } from "react-native";

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

quindi, cambia line1stile come di seguito:

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

3
grazie Melih Mucuk! alignSelf: "tratto" suggerito da Corentin S. è il più facile e semplice, quindi ho accettato quella risposta. Tuttavia, avere Dimensioni mi porta a un nuovo modo di giocare con il layout. In alcuni casi, potremmo regolare le voci a livello di codice, grazie!
franfran,

1
@Melih Trovo che la larghezza restituita sia errata sul mio dispositivo Android. La larghezza giusta dovrebbe essere 720px, ma restituisce 360px.
peacepassion,

4
@peacepassion, hai ottenuto 360, perché il dpi del tuo dispositivo è ridimensionato di 2x. Prova Dimensions.get('window').scale: questo dovrebbe restituire 2 nel tuo caso.
Gerusalemme,

Grazie per la tua risposta, ho a che fare con un contenitore con uno sfondo e il tuo suggerimento si adatta perfettamente.
clarenswd,

7
Questo non funzionerà quando il dispositivo viene ruotato. È meglio usare un layout adattivo.
Laynemoseley,

26

Editted:

Al fine di flettere solo il testo centrale, è possibile adottare un approccio diverso: non riflettere le altre viste.

  • Lascia che flexDirection rimanga nella 'colonna'
  • rimuovere il alignItems : 'center'dal contenitore
  • aggiungere alignSelf:'center'alle visualizzazioni di testo che non si desidera flettere

È possibile avvolgere il componente Testo in un componente Visualizza e dare alla vista una flessibilità di 1.

Il flex darà:

Larghezza 100% se flexDirection:'row'in in styles.container

Altezza al 100% se flexDirection:'column'in in styles.container


sì, ho provato a impostare flexDirection: 'row' e flex: 1 in modo che la larghezza vada al 100%. Tuttavia, i componenti sono tutti in linea e non possono passare alla riga successiva. anche io ho usato flexWrap: 'wrap'
franfran

qualche fortuna con il nuovo metodo franfran?
Nishanth Shankar,

the alignSelf: 'tratto' suggerito da Corentin S. funziona.
franfran,

8

Ecco qui:

Basta cambiare lo stile line1 come di seguito:

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

6

Usa JavaScript per ottenere la larghezza e l'altezza e aggiungili nello stile di Visualizza. Per ottenere la larghezza e l'altezza complete, utilizzare 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
    }
}

e poi,

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

Ooh, mi piace questo Forse non è la soluzione migliore ma ha risolto il mio problema. Per non parlare del fatto che è una funzione piuttosto ordinata in generale.
Kevin Østerkilde,

5

Per prima cosa aggiungi il componente Dimensione:

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

Secondo definire le variabili:

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

In terzo luogo metterlo nel tuo foglio di stile:

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

In realtà in questo esempio volevo creare una vista reattiva e volevo visualizzare solo 0,25 della vista dello schermo, quindi l'ho moltiplicato per 0,25, se volevi il 100% dello schermo non moltiplicarlo per nulla del genere:

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

2

Nota: prova a comprendere appieno il concetto di flessibilità.

       <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

basta rimuovere gli alignItems: 'center'stili contenitore e aggiungerli textAlign: "center"aline1 stile indicato di seguito.

Funzionerà bene

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

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

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

prova questo:

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
  }
}

Si prega di fornire una risposta adeguata alla domanda. Non fornire un collegamento senza prima spiegare qui di cosa si tratta.
Akaisteph7,

-1

width: '100%'e alignSelf: 'stretch'non ha funzionato per me. Dimensionsnon ha soddisfatto il mio compito perché avevo bisogno di operare in una vista profondamente annidata. Ecco cosa ha funzionato per me, se riscrivo il tuo codice. Ho appena aggiunto alcune altre se ho Viewusato le flexproprietà per ottenere il layout necessario:

  {/* 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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.