QUEACT本地flexbox

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

谢谢你！

update1： Nishanth Shankar的建议，添加 flex:1

对于包装纸，

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

Answer 1

simply将

alignSelf: "stretch"

添加到您的物品的样式表中。

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

您应该使用

Answer 2

首先定义尺寸

import { Dimensions } from "react-native";

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

，然后更改样式如下：

line1

为了仅弯曲中心文本，可以采用其他方法 -

unflex其他视图。

Answer 3

从容器中删除

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

add

alignItems : 'center'到您不想弹性的文本视图

您可以将文本组件包裹在视图组件中，并给视图一个flex为1。 flex将给出：
100％宽度如果sytles.container

• 100％如果styles.container

  中的
alignSelf:'center'

您去的地方：

根据下面的“更改LINE1”样式：

flexDirection:'row'

第一个添加尺寸组件：

flexDirection:'column'

秒定义变量：

Answer 4

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

三分之二放在您的样式表中：

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

实际上，在此示例中，我想进行响应式视图，并且只想查看屏幕视图的0.25，因此我将其乘以0.25，如果您想要100％的屏幕不会与任何类似的内容相乘：

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

Answer 5

使用JavaScript获得宽度和高度，并将其添加到视图的样式中。 要获得全宽度和高度，请使用

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

https：//facebook.github.io/react-native/docs/dimensions.html

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

然后，Dimensions.get('window').width

Answer 6

和

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

对我不起作用。 

width: '100%'不适合我的任务，因为我需要在深度嵌套的视图上操作。如果我重写您的代码，这就是对我有用的。我刚刚添加了更多alignSelf: 'stretch'

，并使用了

Dimensions

属性来实现所需的布局：

View

Answer 7

即将删除容器样式中的

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>

添加到以下the的样式中。 

它会很好地工作

alignItems: 'center'

textAlign: "center"

trone this：

Answer 8

line1

注：尝试完全了解Flex概念。

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

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

themply使用宽度：'100％'Style ={{width : "100%"}}

Answer 9

我的一个人没有100％的宽度工作。我添加了儿童组件。它立即起作用。您可以尝试一下，也可能对您的情况有效。
    

simple答案： 使用对齐：在容器视图上“伸展”。

为我工作