Saya sudah membaca beberapa tutorial flexbox, tetapi saya masih tidak bisa membuat tugas sederhana ini berhasil.
Bagaimana saya bisa membuat kotak merah menjadi 100% lebar?
Kode:
<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>
gaya:
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,
},
Terima kasih!
Pembaruan 1: Saran oleh Nishanth Shankar, menambahkan flex: 1 untuk pembungkus, flexDirection: 'row'
Keluaran:
Kode:
<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
sumber
sumber
width: "100%"
juga harus bekerja tetapi tidak. Saya rasa saya tidak mengerti ketikaalignSelf: "stretch"
bekerja vswidth: "100%"
. @ Corentin ada ide? Terima kasih!position: absolute, top: 0, bottom: 0, left: 0, right: 0
Kamu harus menggunakan Dimensi
Pertama, tentukan Dimensi.
kemudian, ubah
line1
gaya seperti di bawah ini:sumber
Dimensions.get('window').scale
- ini harus mengembalikan 2 dalam kasus Anda.Diedit:
Untuk hanya melenturkan teks tengah, pendekatan yang berbeda dapat diambil - Hapus tampilan lain.
alignItems : 'center'
dari wadahalignSelf:'center'
ke tampilan teks yang tidak ingin Anda tekukAnda bisa membungkus komponen teks dalam komponen tampilan dan memberikan tampilan 1 flex.
Flex akan memberikan:
Lebar 100% jika
flexDirection:'row'
dalam styles.containerTinggi 100% jika di
flexDirection:'column'
dalam styles.containersumber
Ini dia:
Cukup ubah gaya line1 seperti di bawah ini:
sumber
Gunakan javascript untuk mendapatkan lebar dan tinggi dan menambahkannya dalam gaya View. Untuk mendapatkan lebar dan tinggi penuh, gunakan
Dimensions.get('window').width
https://facebook.github.io/react-native/docs/dimensions.htmllalu,
sumber
Pertama-tama tambahkan komponen Dimensi:
Variabel definisi kedua:
Ketiga taruh di stylesheet Anda:
Sebenarnya dalam contoh ini saya ingin membuat tampilan responsif dan hanya ingin melihat 0,25 tampilan layar, jadi saya mengalikannya dengan 0,25, jika Anda ingin 100% layar jangan dikalikan dengan hal-hal seperti ini:
sumber
sumber
hapus saja
alignItems: 'center'
dalam gaya wadah dan tambahkantextAlign: "center"
keline1
gaya seperti yang diberikan di bawah ini.Ini akan bekerja dengan baik
sumber
coba ini:
sumber
width: '100%'
danalignSelf: 'stretch'
tidak bekerja untuk saya.Dimensions
tidak sesuai dengan tugas saya karena saya perlu beroperasi pada tampilan yang sangat bersarang. Inilah yang bekerja untuk saya, jika saya menulis ulang kode Anda. Saya baru saja menambahkan beberapaView
s dan menggunakanflex
properti untuk mencapai tata letak yang diperlukan:sumber