100% de ancho en React Native Flexbox

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

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

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

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

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

Aqui tienes:

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

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

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()]}>

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

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>

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

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

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>