100% Breite in React Native Flexbox

Sie sollten Dimensions verwenden

Definieren Sie zunächst die Dimensionen.

import { Dimensions } from "react-native";

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

ändern Sie dann den line1 -Stil wie folgt:

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

Bearbeitet:

Um nur den mittleren Text zu biegen, kann ein anderer Ansatz gewählt werden - Biegen Sie die anderen Ansichten auseinander

• Lasse flexDirection bei 'column'
• entferne den alignItems : 'center' aus dem Behälter
• fügen Sie alignSelf:'center' zu den Textansichten hinzu, die Sie nicht biegen möchten

Sie können die Textkomponente in eine Ansichtskomponente einschließen und der Ansicht einen Flex von 1 geben.

Der Flex ergibt:

100% width wenn der flexDirection:'row' in styles.container

100% height wenn flexDirection:'column' in styles.container

Hier geht's:

Ändern Sie einfach den line1-Stil wie folgt:

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

Verwenden Sie Javascript, um die Breite und Höhe zu ermitteln und sie im View-Stil hinzuzufügen. Um die volle Breite und Höhe zu erhalten, verwenden Sie Dimensions.get('window').widthhttps://facebook.github.io/react-native/docs/dimensions.html

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

und dann,

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

Fügen Sie zuerst die Dimensionskomponente hinzu:

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

Zweite definiere Variablen:

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

Drittens setzen Sie es in Ihrem Stylesheet:

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

Eigentlich wollte ich in diesem Beispiel eine reaktionsschnelle Ansicht erstellen und wollte nur 0,25 der Bildschirmansicht anzeigen, also habe ich sie mit 0,25 multipliziert. Wenn Sie 100% des Bildschirms möchten, multiplizieren Sie sie nicht mit so etwas:

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

Hinweis: Versuchen Sie, das Flex-Konzept vollständig zu verstehen.

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

entfernen Sie einfach den alignItems: 'center' in den Container-Stilen und fügen Sie textAlign: "center" zum line1-Stil hinzu, wie unten angegeben.

Es wird gut funktionieren

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

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

Style = {{width: "100%"}} Bitte versuchen Sie diese Syntax. Linkbeschreibung hier eingeben