React Native Flexbox'ta% 100 genişlik

Zaten birkaç flexbox öğretici okudum, ama yine de bu basit görevi çalışmak için yapamıyorum.

Kırmızı kutuyu% 100 genişliğe nasıl yapabilirim?

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>

stili:

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

Teşekkür ederim!

Güncelleme 1: Nishanth Shankar'ın önerisi, sarmalayıcı için flex: 1 eklenmesi, flexDirection: 'row'

Çıktı:

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

alignSelf: "stretch"Öğenizin stil sayfasına eklemeniz yeterlidir .

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

Boyutları kullanmalısınız

İlk olarak, Boyutları tanımlayın.

import { Dimensions } from "react-native";

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

sonra, line1aşağıdaki gibi stili değiştirin :

line1: {
    backgroundColor: '#FDD7E4',
    width: width,
},

editted:

Yalnızca ortadaki metni esnetmek için farklı bir yaklaşım benimsenebilir - Diğer görünümleri açığa çıkarın.

• FlexDirection 'sütununda kalsın
• alignItems : 'center'konteynırdan çıkarın
• alignSelf:'center'esnetmek istemediğiniz metin görünümlerine ekleyin

Metin bileşenini bir Görünüm bileşenine sarabilir ve Görünüm'e 1 esneklik verebilirsiniz.

Flex şunları verecektir:

% 100 genişlik flexDirection:'row'stillerde ise . Konteyner

flexDirection:'column'Stillerde % 100 yükseklik . Konteyner

Hadi bakalım:

Sadece line1 stilini aşağıdaki gibi değiştirin:

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

Genişliği ve yüksekliği elde etmek için javascript kullanın ve bunları Görünüm stiline ekleyin. Tam genişlik ve yükseklik elde etmek için https://facebook.github.io/react-native/docs/dimensions.html adresini kullanınDimensions.get('window').width

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

ve sonra,

<View style={[styles.overlay, this.getSize()]}>

İlk olarak Dimension bileşenini ekleyin:

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

İkinci değişkenleri tanımlayın:

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

Üçüncü olarak stil sayfanıza koyun:

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

Aslında bu örnekte duyarlı görünüm yapmak istedim ve ekran görüntüsünün sadece 0.25'ini görüntülemek istedim, böylece ekranın% 100'ünün böyle bir şeyle çarpmaması için 0.25 ile çarptım:

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

Not: Esnek konsepti tam olarak anlamaya çalışın.

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

Sadece kaldırmak alignItems: 'center'konteyner stillerde ve eklemek textAlign: "center"için line1aşağıda verilen benzeri tarzı.

İyi çalışacak

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

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

Style ={{width : "100%"}}

bunu dene:

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%'ve alignSelf: 'stretch'benim için çalışmadı. Dimensionsbenim görev paketi değildi çünkü ben derin iç içe bir görünüm üzerinde çalışması gerekiyordu. Kodumu yeniden yazarsam benim için işe yarayan şey budur. Biraz daha Views ekledim flexve gerekli düzeni elde etmek için özellikleri kullandım :

  {/* 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>