100% szerokości w React Native Flexbox

203

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?

wprowadź opis zdjęcia tutaj

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:

wprowadź opis zdjęcia tutaj

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,
  },
franfran
źródło

Odpowiedzi:

414

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

line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
},
Corentin S.
źródło
9
Link jest zepsuty.
Lukas Knuth,
2
Korzystając z alignSelf stretch, miałem problem z Androidem - miałem obraz z pozycją „absolutną” iw tym przypadku, nawet używając „stretch”, takie pole zostaje dopełnione do krawędzi zawartych w nim elementów. Dimensions.get („okno”). Szerokość w moim przypadku działała zarówno na iOS, jak i na Androidzie.
st_bk
Ten sposób rozwiązał wszystkie moje problemy z „pełną szerokością”, sprawdź to: snack.expo.io/S1PWQqkcZ
webdevinci
1
Wygląda na to, że width: "100%"powinien również działać, ale nie działa. Myślę, że nie rozumiem, kiedy alignSelf: "stretch"działa kontra width: "100%". @Corentin jakieś pomysły? Dzięki!
Joel
4
@st_bk był tam ratownikiem! Znalazłem jednak lepsze rozwiązanie dla zdarzenia, w którym jesteś absolutnie pozycjonowany i musisz rozciągnąć:position: absolute, top: 0, bottom: 0, left: 0, right: 0
lance.dolan
119

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,
},
Melih Mucuk
źródło
3
dzięki Melih Mucuk! alignSelf: „stretch” sugerowany przez Corentin S. jest najłatwiejszy i najprostszy, więc zaakceptowałem tę odpowiedź. Jednak posiadanie Dimensions prowadzi mnie do nowego sposobu zabawy wokół układu. W niektórych przypadkach możemy programowo dostosować elementy, dziękuję!
franfran
1
@Melih Uważam, że zwrócona szerokość jest niepoprawna na moim urządzeniu z Androidem. Prawidłowa szerokość powinna wynosić 720px, ale zwraca 360px.
peacepassion
4
@peacepassion, masz 360, ponieważ rozdzielczość twojego urządzenia jest skalowana 2x. Spróbuj Dimensions.get('window').scale- to powinno zwrócić 2 w twoim przypadku.
matusalem
Dzięki za odpowiedź, mam do czynienia z pojemnikiem z tłem, a twoja sugestia idealnie pasuje.
clarenswd
7
To nie zadziała, gdy urządzenie zostanie obrócone. Lepiej jest użyć układu adaptacyjnego.
laynemoseley
26

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

Nishanth Shankar
źródło
tak, próbowałem ustawić flexDirection: „row” i flex: 1, aby szerokość wynosiła 100%. Wszystkie elementy są jednak wbudowane i nie mogą przejść do następnego wiersza. nawet ja użyłem flexWrap: „wrap”
franfran
jakieś szczęście z nową metodą franfran?
Nishanth Shankar
działa alignSelf: „stretch” sugerowany przez Corentin S.
franfran
8

Proszę bardzo:

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

line1: {
    backgroundColor: '#FDD7E4',
    width:'100%',
    alignSelf:'center'
}
iDevAmit
źródło
6

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()]}>
Sean Chen
źródło
Och, podoba mi się to. Być może nie jest to najlepsze rozwiązanie, ale rozwiązało mój problem. Nie wspominając, że jest to całkiem fajna funkcja w ogóle.
Kevin Østerkilde
5

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'
}
Aboalela Mohammed
źródło
2

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>
Daniel Agus Sidabutar
źródło
1

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'
},
ravi
źródło
1
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
  }
}
Chaurasia
źródło
Proszę podać właściwą odpowiedź na pytanie. Nie podawaj linku bez uprzedniego wyjaśnienia, o co chodzi.
Akaisteph7
-1

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>
Саша Давиденко
źródło