React Native Flexbox中的100%宽度

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

只需添加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保持在'列'
• alignItems : 'center'从容器中删除
• 添加alignSelf:'center'到您不想弯曲的textviews

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

flex将给出:

如果flexDirection:'row'在styles.container中,则为100%宽度

如果flexDirection:'column'在styles.container中,则为100%高度

Answer 4

使用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 5

干得好：

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

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

Answer 6

首先添加Dimension组件：

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