To może wydawać się podstawowym pytaniem, ale nie potrafię tego rozgryźć ani poprawnie wyrazić słowa wyszukiwania. Mam View z dwoma innymi widokami, z których jeden jest czasami ukryty. Więc komponent wygląda mniej więcej tak:

function MyComponent (props) {
  return (
    <View style={{ flex: 1 }}>
      {
        props.showButtonView
          ? (
            <View style={{ flex: ??? }}>
              <Button title='do something' onPress={() => console.warn('doSomethign)} />
            </View>
          )
          : null
      }
      <View style={{ flex: ?? }}>
        <Stuff/>
      </View>
    </View>
  )
}

Teraz próbuję zrobić, aby komponent Stuff pokrywał cały ekran, gdy nie ma Button. Jeśli jednak props.showButtonView jest prawdą, a chcemy zobaczyć widok z Button, chcę tylko zobaczyć przycisk u góry, a reszta jest cokolwiek jest w komponencie Stuff. Jak mam to zrobić? Czy opiera się na liczbach flex?

Możesz też się zastanawiać, dlaczego przede wszystkim muszę rozdzielić te dwa widoki na osobne widoki, ponieważ w komponencie Stuff są inne niepowiązane elementy, które zakrywają przycisk i nie pozwalają mi aby go kliknąć. W każdym razie, krótko mówiąc, rozdzielenie tych dwóch przez View jest w tym przypadku obowiązkowe.

0
theJuls 19 listopad 2019, 20:40

1 odpowiedź

Najlepsza odpowiedź

flex powinien wynosić 1 dla obu miejsc.

Flex:1 Wskazuje, że po if zajmie całą dostępną przestrzeń. Tak więc nie ma znaczenia, czy przycisk jest tam umieszczony, czy nie.
Jeśli props.showButtonView jest prawdą, przycisk znajduje się na górze, a reszta jest umieszczana po że.

Inaczej,

Gdy props.showButtonView jest fałsz, kod renderowania przycisku nie zostanie wykonany, a widok rzeczy będzie na całym

Wypróbuj poniższy kod, gdy props.showButtonView === true

function MyComponent (props) {
  return (
    <View style={{ flex: 1 }}>
      {
        props.showButtonView
          ? (
            <View style={{ width: '100%' }}>
              <Button title='do something' onPress={() => console.warn('doSomethign)} />
            </View>
          )
          : null
      }
      <View style={{ flex: 1 }}>
        <Stuff/>
      </View>
    </View>
  )
}
2
abhikumar22 19 listopad 2019, 21:15
Jeśli umieszczę flex: 1 w obu miejscach, każdy z ich widoków zajmuje połowę ekranu, co nie jest tym, czego chcę, ponieważ przycisk jest tylko ułamkiem ekranu. Tak więc w moim improwizowanym kodzie mam obecnie widok przycisku z flex: 1, drugi to flex: 10, ale to nie wydaje się właściwe. Chcę zagwarantować, że przycisk zajmie tylko tyle miejsca, aby wyświetlić przycisk, podczas gdy drugi widok pokryje resztę ekranu.
 – 
theJuls
19 listopad 2019, 21:05
Walczysz, gdy props.showButtonView jest prawdziwe? @theJuls
 – 
abhikumar22
19 listopad 2019, 21:06
Prawidłowy. Dzieli ekran równo. Nie chcę tego, ponieważ przycisk jest znacznie mniejszy niż składnik Stuff.
 – 
theJuls
19 listopad 2019, 21:07
Edytowałem kod, spróbuj i zaakceptuj, jeśli działa. Dziękuję :)
 – 
abhikumar22
19 listopad 2019, 21:16
Nie pamiętam kontekstu tego pytania ani nic takiego, ale jestem pewien, że zadziałało XD Lepiej 2 lata późno niż wcale, jak sądzę.
 – 
theJuls
4 luty 2021, 03:58