Lebar 100% dalam Bereaksi Native Flexbox

203

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?

masukkan deskripsi gambar di sini

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:

masukkan deskripsi gambar di sini

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,
  },
franfran
sumber

Jawaban:

414

Cukup tambahkan alignSelf: "stretch"ke stylesheet item Anda.

line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
},
Corentin S.
sumber
9
Tautan rusak.
Lukas Knuth
2
Menggunakan peregangan alignSelf, saya memiliki masalah dengan Android - Saya memiliki Gambar dengan posisi 'absolut' dan dalam kasus ini, bahkan menggunakan 'peregangan', kotak tersebut akan diisi ke tepi elemen yang terkandung di dalamnya. Lebar Dimensions.get ('window') bekerja di iOS dan Android dalam kasus saya.
st_bk
Cara ini menyelesaikan semua masalah 'lebar penuh' saya, periksa: snack.expo.io/S1PWQqkcZ
webdevinci
1
Sepertinya width: "100%"juga harus bekerja tetapi tidak. Saya rasa saya tidak mengerti ketika alignSelf: "stretch"bekerja vs width: "100%". @ Corentin ada ide? Terima kasih!
Joel
4
@st_bk adalah penyelamat di sana! Namun, saya menemukan solusi yang lebih baik untuk acara yang benar-benar Anda posisi dan perlu peregangan:position: absolute, top: 0, bottom: 0, left: 0, right: 0
lance.dolan
119

Kamu harus menggunakan Dimensi

Pertama, tentukan Dimensi.

import { Dimensions } from "react-native";

var width = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height

kemudian, ubah line1gaya seperti di bawah ini:

line1: {
    backgroundColor: '#FDD7E4',
    width: width,
},
Melih Mucuk
sumber
3
thx Melih Mucuk! alignSelf: "stretch" yang disarankan oleh Corentin S. adalah yang termudah dan sederhana jadi saya menerima jawaban itu. Namun, memiliki Dimensi membawa saya ke cara baru untuk bermain di sekitar tata letak. Dalam beberapa kasus, kami dapat menyesuaikan item secara terprogram, terima kasih!
franfran
1
@Melih saya menemukan lebar yang dikembalikan salah pada perangkat Android saya. Lebar kanan seharusnya 720px, tetapi 360px kembali.
peacepassion
4
@peacepassion, Anda dapat 360, karena dpi perangkat Anda diskalakan 2x. Coba Dimensions.get('window').scale- ini harus mengembalikan 2 dalam kasus Anda.
matusalem
Terima kasih atas jawaban Anda, saya berurusan dengan wadah dengan latar belakang dan saran Anda sangat cocok.
clarenswd
7
Ini tidak akan berfungsi ketika perangkat diputar. Lebih baik menggunakan tata letak adaptif.
laynemoseley
26

Diedit:

Untuk hanya melenturkan teks tengah, pendekatan yang berbeda dapat diambil - Hapus tampilan lain.

  • Biarkan flexDirection tetap di 'kolom'
  • Hapus alignItems : 'center' dari wadah
  • tambahkan alignSelf:'center'ke tampilan teks yang tidak ingin Anda tekuk

Anda bisa membungkus komponen teks dalam komponen tampilan dan memberikan tampilan 1 flex.

Flex akan memberikan:

Lebar 100% jika flexDirection:'row' dalam styles.container

Tinggi 100% jika di flexDirection:'column'dalam styles.container

Nishanth Shankar
sumber
ya, saya mencoba mengatur flexDirection: 'row' dan flex: 1 sehingga lebarnya menjadi 100%. Namun, semua komponen inline dan tidak dapat pergi ke baris berikutnya. bahkan saya menggunakan flexWrap: 'wrap'
franfran
beruntung dengan metode franfran baru?
Nishanth Shankar
the alignSelf: 'stretch' yang disarankan oleh Corentin S. works.
franfran
8

Ini dia:

Cukup ubah gaya line1 seperti di bawah ini:

line1: {
    backgroundColor: '#FDD7E4',
    width:'100%',
    alignSelf:'center'
}
iDevAmit
sumber
6

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.html

getSize() {
    return {
        width: Dimensions.get('window').width, 
        height: Dimensions.get('window').height
    }
}

lalu,

<View style={[styles.overlay, this.getSize()]}>
Sean Chen
sumber
Ooh, aku suka ini. Mungkin bukan solusi terbaik tapi itu menyelesaikan masalah saya. Belum lagi itu fungsi yang cukup rapi secara umum.
Kevin Østerkilde
5

Pertama-tama tambahkan komponen Dimensi:

import { AppRegistry, Text, View,Dimensions } from 'react-native';

Variabel definisi kedua:

var height = Dimensions.get('window').height;
var width = Dimensions.get('window').width;

Ketiga taruh di stylesheet Anda:

textOutputView: {
    flexDirection:'row',
    paddingTop:20,
    borderWidth:1,
    borderColor:'red',
    height:height*0.25,
    backgroundColor:'darkgrey',
    justifyContent:'flex-end'
}

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:

textOutputView: {
    flexDirection:'row',
    paddingTop:20,
    borderWidth:1,
    borderColor:'red',
    height:height,
    backgroundColor:'darkgrey',
    justifyContent:'flex-end'
}
Aboalela Mohammed
sumber
2

Tercatat: Cobalah untuk sepenuhnya memahami tentang konsep fleksibel.

       <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
sumber
1

hapus saja alignItems: 'center'dalam gaya wadah dan tambahkan textAlign: "center"keline1 gaya seperti yang diberikan di bawah ini.

Ini akan bekerja dengan baik

container: {
  flex: 1,
  justifyContent: 'center',
  backgroundColor: '#F5FCFF',
  borderWidth: 1,
}

line1: {
    backgroundColor: '#FDD7E4',
    textAlign:'center'
},
ravi
sumber
1
Style ={{width : "100%"}}

coba ini:

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
sumber
Harap berikan jawaban yang tepat untuk pertanyaan itu. Jangan memberikan tautan tanpa terlebih dahulu menjelaskan di sini tentang apa itu.
Akaisteph7
-1

width: '100%'dan alignSelf: 'stretch'tidak bekerja untuk saya. Dimensionstidak 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 beberapa Views dan menggunakan flexproperti untuk mencapai tata letak yang diperlukan:

  {/* 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>
Саша Давиденко
sumber