percent - 100% de ancho en React Native Flexbox

react native flexbox grid

Question

Ya he leído varios tutoriales de flexbox, pero todavía no puedo hacer que esta tarea simple 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,
  },

Answer 1

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>

Answer 2

Debes usar Dimensions

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 estilo de line1 como se muestra a continuación:

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

Answer 3

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

Answer 4

Simplemente agregue alignSelf: "stretch" a la hoja de estilo de su elemento.

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

Answer 5

Use javascript para obtener el ancho y el alto 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()]}>

Answer 6

simplemente elimine alignItems: ''center'' en los estilos de contenedor y agregue textAlign: "center" al estilo de line1 como se muestra a continuación.

Funcionará bien

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

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

Answer 7

Aqui tienes:

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

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

Answer 8

Editado:

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

• Deje que flexDirection permanezca en ''columna''
• eliminar alignItems : ''center'' del contenedor
• agregue 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 flexDirection:''row'' en styles.container

Altura del 100% si flexDirection:''column'' en styles.container

Answer 9

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

Por favor, intente esta sintaxis. ingrese la descripción del enlace aquí