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用于包装器， flexDirection:“行”

输出:

代码:

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

当前回答

你应该使用维度

首先，定义维度。

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

2015-10-23 22:53:01

其他回答

给你:

只需更改line1样式如下所示:

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

2018-08-02 09:25:36

使用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()]}>

2017-03-31 12:01:39

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

效果会很好

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

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

2019-06-21 12:15:28

你应该使用维度

首先，定义维度。

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

2015-10-23 22:53:01

简单地使用width:'100%'

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

2021-03-31 06:33:41

100%的宽度在React Native Flexbox

推荐文章

最新文章

标签