ความกว้าง 100% ใน React Native Flexbox

ฉันได้อ่านการสอน flexbox หลายครั้งแล้ว แต่ฉันยังไม่สามารถทำงานง่าย ๆ นี้ได้

ฉันจะทำให้กล่องสีแดงกว้างถึง 100% ได้อย่างไร

รหัส:

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

รูปแบบ:

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

ขอบคุณ!

อัปเดต 1: คำแนะนำโดย Nishanth Shankar เพิ่ม flex: 1 สำหรับ wrapper, flexDirection: 'row'

เอาท์พุท:

รหัส:

  <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"สไตล์ชีทของรายการของคุณ

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

คุณควรใช้ส่วนข้อมูล

ก่อนกำหนดมิติ

import { Dimensions } from "react-native";

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

จากนั้นเปลี่ยนline1สไตล์ตามด้านล่าง:

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

editted:

เพื่อที่จะงอเฉพาะข้อความกลางคุณสามารถใช้วิธีการที่แตกต่าง - ย่อมุมมองอื่น

• ให้ flexDirection คงที่ 'คอลัมน์'
• ลบออกalignItems : 'center'จากภาชนะ
• เพิ่ม alignSelf:'center'ใน textviews ที่คุณไม่ต้องการดิ้น

คุณสามารถล้อมองค์ประกอบข้อความในองค์ประกอบมุมมองและให้มุมมองที่ยืดหยุ่น 1

ความยืดหยุ่นจะให้:

ความกว้าง 100% ถ้า flexDirection:'row'อยู่ใน styles.container

ความสูง 100% ถ้าflexDirection:'column'อยู่ใน styles.container

ไปเลย:

เพียงเปลี่ยนสไตล์ line1 ตามด้านล่าง:

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

ใช้จาวาสคริปต์เพื่อรับความกว้างและความสูงและเพิ่มในสไตล์ของมุมมอง ในการรับความกว้างและความสูงแบบเต็มให้ใช้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
    }
}

จากนั้น

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

เพิ่มองค์ประกอบมิติแรก:

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

ตัวแปรที่สองกำหนด:

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

ที่สามใส่ไว้ในสไตล์ชีตของคุณ:

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

ในตัวอย่างนี้จริง ๆ แล้วฉันต้องการให้มุมมองที่ตอบสนองและต้องการดูเพียง 0.25 ของมุมมองหน้าจอดังนั้นฉันจึงคูณด้วย 0.25 ถ้าคุณต้องการ 100% ของหน้าจอไม่คูณกับสิ่งใด ๆ เช่นนี้:

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

ตั้งข้อสังเกต: พยายามที่จะเข้าใจอย่างเต็มที่เกี่ยวกับแนวคิดความยืดหยุ่น

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

เพียงแค่เอาalignItems: 'center'ในรูปแบบที่ภาชนะและเพิ่มtextAlign: "center"ไปยังline1รูปแบบเช่นได้รับด้านล่าง

มันจะทำงานได้ดี

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

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

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

ลองนี้:

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%'และalignSelf: 'stretch'ไม่ทำงานสำหรับฉัน Dimensionsไม่ตรงกับงานของฉันเพราะฉันต้องทำงานในมุมมองที่ซ้อนกันอย่างลึกล้ำ นี่คือสิ่งที่ใช้ได้กับฉันถ้าฉันเขียนรหัสของคุณใหม่ ฉันเพิ่งเพิ่มคุณสมบัติเพิ่มเติมViewและใช้งานบางส่วนflexเพื่อให้ได้โครงร่างที่ต้องการ:

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