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.
1 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>
)
}
flex: 1w 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 zflex: 1, drugi toflex: 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.Stuff.