Lebar 100% dalam Bereaksi Native Flexbox

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

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

line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
},

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

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

Ini dia:

Cukup ubah gaya line1 seperti di bawah ini:

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

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()]}>

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'
}

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>

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'
},

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
  }
}

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>