100% chiều rộng trong React Native Flexbox

Tôi đã đọc một số hướng dẫn flexbox, nhưng tôi vẫn không thể thực hiện tác vụ đơn giản này để làm việc.

Làm thế nào tôi có thể làm cho hộp màu đỏ đến chiều rộng 100%?

Mã số:

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

Phong cách:

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

Cảm ơn bạn!

Cập nhật 1: Gợi ý của Nishanth Shankar, thêm flex: 1 cho trình bao bọc, flexDirection: 'row'

Đầu ra:

Mã số:

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

Chỉ cần thêm alignSelf: "stretch"vào biểu định kiểu của mục của bạn.

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

Bạn nên sử dụng Kích thước

Đầu tiên, xác định kích thước.

import { Dimensions } from "react-native";

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

Sau đó, thay đổi line1phong cách như dưới đây:

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

Đã chỉnh sửa:

Để chỉ uốn cong văn bản trung tâm, có thể thực hiện một cách tiếp cận khác - Hủy bỏ các chế độ xem khác.

• Đặt flexDirection vẫn ở 'cột'
• loại bỏ alignItems : 'center'khỏi container
• thêm alignSelf:'center'vào các bài phỏng vấn mà bạn không muốn uốn cong

Bạn có thể bọc thành phần Văn bản trong thành phần Xem và cung cấp cho Chế độ xem 1.

Các flex sẽ cung cấp cho:

100% chiều rộng nếu flexDirection:'row' trong style.container

100% chiều cao nếu flexDirection:'column'trong style.container

Ở đây bạn đi:

Chỉ cần thay đổi kiểu line1 theo bên dưới:

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

Sử dụng javascript để có chiều rộng và chiều cao và thêm chúng theo kiểu Xem. Để có được chiều rộng và chiều cao đầy đủ, hãy sử dụng 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
    }
}

và sau đó,

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

Đầu tiên thêm thành phần Dimension:

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

Biến xác định thứ hai:

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

Thứ ba đặt nó trong biểu định kiểu của bạn:

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

Trên thực tế trong ví dụ này tôi muốn tạo chế độ xem phản hồi và chỉ muốn xem 0,25 lượt xem màn hình nên tôi đã nhân nó với 0,25, nếu bạn muốn 100% màn hình không nhân nó với bất kỳ điều gì như thế này:

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

Lưu ý: Cố gắng hiểu đầy đủ về khái niệm flex.

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

chỉ cần loại bỏ alignItems: 'center'trong các kiểu container và thêm textAlign: "center"vàoline1 kiểu như được đưa ra dưới đây.

Nó sẽ hoạt động tốt

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

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

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

thử cái này:

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%'và alignSelf: 'stretch'đã không làm việc cho tôi. Dimensionskhông đặt ra nhiệm vụ của tôi vì tôi cần phải hoạt động trên một cái nhìn sâu sắc. Đây là những gì làm việc cho tôi, nếu tôi viết lại mã của bạn. Tôi chỉ cần thêm một số thuộc tính Viewvà sử dụng flexđể đạt được bố cục cần thiết:

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