100% szerokości w React Native Flexbox

Przeczytałem już kilka samouczków Flexbox, ale nadal nie mogę sprawić, by to proste zadanie zadziałało.

Jak zrobić czerwone pole do 100% szerokości?

Kod:

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

styl:

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

Dziękuję Ci!

Aktualizacja 1: Sugestia Nishantha Shankara, dodająca flex: 1 dla opakowania, flexDirection: „row”

Wynik:

Kod:

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

Po prostu dodaj alignSelf: "stretch"do arkusza stylów swojego przedmiotu.

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

Powinieneś użyć wymiarów

Najpierw zdefiniuj wymiary.

import { Dimensions } from "react-native";

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

następnie zmień line1styl jak poniżej:

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

Edytowane:

Aby wygiąć tylko środkowy tekst, można zastosować inne podejście - rozpakuj pozostałe widoki.

• Pozwól flexDirection pozostać w „kolumnie”
• wyjmij alignItems : 'center'pojemnik
• dodaj alignSelf:'center'do widoków tekstu, których nie chcesz wyginać

Możesz owinąć komponent Tekst w komponent Widok i nadać mu widok 1.

Flex da:

100% szerokości, jeśli w flexDirection:'row'in styles.container

100% wysokości, jeśli w flexDirection:'column'in styles.container

Proszę bardzo:

Po prostu zmień styl linii1 zgodnie z poniższym:

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

Użyj javascript, aby uzyskać szerokość i wysokość i dodać je w stylu View. Aby uzyskać pełną szerokość i wysokość, użyj 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
    }
}

i wtedy,

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

Najpierw dodaj komponent Wymiar:

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

Po drugie, zdefiniuj zmienne:

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

Po trzecie, umieść to w swoim arkuszu stylów:

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

Właściwie w tym przykładzie chciałem wykonać responsywny widok i chciałem wyświetlić tylko 0,25 widoku ekranu, więc pomnożyłem go przez 0,25, jeśli chcesz, aby 100% ekranu nie pomnożyło go przez coś takiego:

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

Uwaga: Spróbuj w pełni zrozumieć koncepcję 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>

wystarczy usunąć alignItems: 'center'style w kontenerze i dodać textAlign: "center"do line1stylu, jak podano poniżej.

Będzie dobrze działać

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

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

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

Spróbuj tego:

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%'i alignSelf: 'stretch'nie działało dla mnie. Dimensionsnie pasowało do mojego zadania, ponieważ musiałem operować na głęboko zagnieżdżonym widoku. Oto, co zadziałało dla mnie, jeśli przepiszę Twój kod. Właśnie dodałem trochę więcej Viewi użyłem flexwłaściwości, aby uzyskać potrzebny układ:

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