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,
},
flexbox
react-native
franfran
źródło
źródło
width: "100%"
powinien również działać, ale nie działa. Myślę, że nie rozumiem, kiedyalignSelf: "stretch"
działa kontrawidth: "100%"
. @Corentin jakieś pomysły? Dzięki!position: absolute, top: 0, bottom: 0, left: 0, right: 0
Powinieneś użyć wymiarów
Najpierw zdefiniuj wymiary.
następnie zmień
line1
styl jak poniżej:źródło
Dimensions.get('window').scale
- to powinno zwrócić 2 w twoim przypadku.Edytowane:
Aby wygiąć tylko środkowy tekst, można zastosować inne podejście - rozpakuj pozostałe widoki.
alignItems : 'center'
pojemnikalignSelf:'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.container100% wysokości, jeśli w
flexDirection:'column'
in styles.containerźródło
Proszę bardzo:
Po prostu zmień styl linii1 zgodnie z poniższym:
źródło
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.htmli wtedy,
źródło
Najpierw dodaj komponent Wymiar:
Po drugie, zdefiniuj zmienne:
Po trzecie, umieść to w swoim arkuszu stylów:
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:
źródło
źródło
wystarczy usunąć
alignItems: 'center'
style w kontenerze i dodaćtextAlign: "center"
doline1
stylu, jak podano poniżej.Będzie dobrze działać
źródło
Spróbuj tego:
źródło
width: '100%'
ialignSelf: 'stretch'
nie działało dla mnie.Dimensions
nie 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ęcejView
i użyłemflex
właściwości, aby uzyskać potrzebny układ:źródło