Question

我已经阅读了几个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为包装， flexDirection：＆＃39; row＆＃39;

输出：

代码：

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

Answer 1

只需将alignSelf: "stretch"添加到商品的样式表中即可。

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

Answer 2

您应该使用Dimensions

首先，定义Dimensions。

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

Answer 3

<强> Editted：

为了仅展示中心文字，可以采用不同的方法 - 解开其他观点。

让flexDirection保持在'column'
从容器中删除alignItems : 'center'
将alignSelf:'center'添加到您不想展开的文字视图

您可以将Text组件包装在View组件中，并为View提供1的flex。

flex将给出：

如果styles.container中的flexDirection:'row'

，则宽度为100％

如果styles.container中的flexDirection:'column'

，则高度为100％

Answer 4

您在这里：

只需按照以下方式更改line1样式：

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

Answer 5

使用javascript获取宽度和高度，并以View的样式添加它们。要获得完整的宽度和高度，请使用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()]}>

Answer 6

首先添加Dimension组件：

var sortGuide = ["sm", "s", "m", "xl"];
var a = ["xl", "sm", "s", "m"];
a.sort((it1, it2) => sortGuide.indexOf(it1) - sortGuide.indexOf(it2));
console.log(a);

第二个定义变量：

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

第三个将它放在你的样式表中：

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

实际上在这个例子中，我想制作响应式视图，并希望仅查看0.25的屏幕视图，所以我将它乘以0.25，如果你想要100％的屏幕不会将它与任何这样的东西相乘： / p>

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

Answer 7

注意：尝试充分了解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>

Answer 8

只需删除容器样式中的alignItems: 'center'，然后将textAlign: "center"添加到line1样式中即可，如下所示。

它将很好地工作

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

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

Answer 9

样式= {{宽度：“ 100％”}} 请尝试使用此语法。 enter link description here

Answer 10

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>

Answer 11

只需使用 width:'100%'

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

React Native Flexbox中的100％宽度

11 个答案: