100% de ancho en React Native Flexbox

203

Ya he leído varios tutoriales de flexbox, pero todavía no puedo hacer que esta simple tarea funcione.

¿Cómo puedo hacer que el cuadro rojo tenga un ancho del 100%?

Código:

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

estilo:

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

¡Gracias!

Actualización 1: Sugerencia de Nishanth Shankar, agregando flex: 1 para el contenedor, flexDirection: 'row'

Salida:

Código:

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

flexbox react-native

— franfran
fuente

414

Simplemente agregue alignSelf: "stretch"a la hoja de estilo de su artículo.

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

— Corentin S.
fuente

9

El enlace está roto.

— Lukas Knuth

2

Al usar alignSelf stretch, tuve un problema con Android: tenía una imagen con posición 'absoluta' y, en este caso, incluso usando 'stretch', dicha caja se rellena hasta el borde de los elementos contenidos dentro. Dimensions.get ('window'). Width funcionó tanto en iOS como en Android en mi caso.

— st_bk

De esta manera resolvió todos mis problemas de 'ancho completo', échale un vistazo: snack.expo.io/S1PWQqkcZ

— webdevinci

1

Parece width: "100%"que también debería funcionar, pero no es así. Creo que no entiendo cuando se alignSelf: "stretch"trabaja frente width: "100%". @Corentin alguna idea? ¡Gracias!

— Joel

44

¡@st_bk fue un salvavidas allí! Sin embargo, encontré una mejor solución para el evento en el que se está posicionando absolutamente y necesita estirarse:position: absolute, top: 0, bottom: 0, left: 0, right: 0

— lance.dolan

119

Debes usar Dimensiones

Primero, defina Dimensiones.

import { Dimensions } from "react-native";

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

luego, cambie el line1estilo como a continuación:

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

— Melih Mucuk
fuente

3

gracias Melih Mucuk! alignSelf: "estiramiento" sugerido por Corentin S. es el más fácil y simple, así que acepté esa respuesta. Sin embargo, tener Dimensiones me lleva a una nueva forma de jugar alrededor del diseño. En algunos casos, podríamos ajustar los elementos mediante programación, ¡gracias!

— franfran

1

@Melih Me parece que el ancho devuelto es incorrecto en mi dispositivo Android. El ancho correcto debe ser 720px, pero devuelve 360px.

— Peacepassion

44

@peacepassion, tienes 360, porque el dpi de tu dispositivo se escala 2x. Intente Dimensions.get('window').scale: esto debería devolver 2 en su caso.

— matusalem

Gracias por su respuesta, estoy tratando con un contenedor con un fondo y su sugerencia encaja perfectamente.

— clarenswd

77

Esto no funcionará cuando se gire el dispositivo. Es mejor usar un diseño adaptativo.

— laynemoseley

26

Editado:

Para flexionar solo el texto central, se puede adoptar un enfoque diferente: Desplegar las otras vistas.

Deje que flexDirection permanezca en 'columna'
retire el alignItems : 'center'recipiente
agregar alignSelf:'center'a las vistas de texto que no desea flexionar

Puede ajustar el componente Texto en un componente Vista y darle a la Vista una flexión de 1.

El flex dará:

100% de ancho si está flexDirection:'row'en styles.container

100% de altura si está flexDirection:'column'en styles.container

— Nishanth Shankar
fuente

Sí, intenté establecer flexDirection: 'row' y flex: 1 para que el ancho llegue al 100%. Sin embargo, todos los componentes están en línea y no pueden pasar a la siguiente línea. incluso usé flexWrap: 'wrap'

— franfran el

alguna suerte con el nuevo metodo franfran?

— Nishanth Shankar

the alignSelf: 'estiramiento' sugerido por Corentin S. funciona.

— franfran

8

Aqui tienes:

Simplemente cambie el estilo de línea1 como se muestra a continuación:

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

— iDevAmit
fuente

6

Use JavaScript para obtener el ancho y la altura y agréguelos en el estilo de Vista. Para obtener el ancho y la altura completos, use 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
    }
}

y entonces,

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

— Sean Chen
fuente

Ooh, me gusta esto Posiblemente no sea la mejor solución, pero resolvió mi problema. Sin mencionar que es una función bastante ordenada en general.

— Kevin Østerkilde

5

Primero agregue el componente Dimensión:

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

Segundo definir variables:

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

Tercero, póngalo en su hoja de estilo:

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

En realidad, en este ejemplo, quería hacer una vista receptiva y quería ver solo 0.25 de la vista de pantalla, así que la multipliqué por 0.25, si quería el 100% de la pantalla, no la multiplique con algo como esto:

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

— Aboalela Mohammed
fuente

2

Nota: Intente comprender completamente el concepto 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>

— Daniel Agus Sidabutar
fuente

1

simplemente elimine los alignItems: 'center'estilos del contenedor y agréguelos textAlign: "center"al line1estilo que se muestra a continuación.

Funcionará bien

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

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

— ravi
fuente

1

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

prueba esto:

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

— Chaurasia
fuente

Proporcione una respuesta adecuada a la pregunta. No proporcione un enlace sin primero explicar aquí de qué se trata.

— Akaisteph7

-1

width: '100%'y alignSelf: 'stretch'no funcionó para mí Dimensionsno encajaba en mi tarea porque necesitaba operar en una vista profundamente anidada. Esto es lo que funcionó para mí, si reescribo su código. Acabo de agregar algunos más Viewy usé flexpropiedades para lograr el diseño necesario:

  {/* 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>

— Саша Давиденко
fuente