React Native:Flex:1不填充父级的宽度 [英] React Native: Flex: 1 does not fill width of parent

问题描述

我正在使用从本机库导入的ListItem. ListItem是红色的，它的子视图是黄色的.从屏幕截图中可以看到，尽管具有以下灵活性，但View样式并不能占据ListItem的整个宽度:1.如何使View占据ListItem的整个宽度?

I'm using ListItem imported from native-base. ListItem is red and it's child View is yellow. As you can see from the screenshot, View style does not take entire width of ListItem, despite having a flex: 1. How can I make it so that View take entire width of ListItem?

在此处查看图片

 <List>
<ListItem style={[styles.listitem, { backgroundColor: "red" }]}>
    <View
        style={{
            flex: 1,
            flexDirection: "column",
            backgroundColor: "yellow"
        }}
    >
        <Text style={styles.timeInfoHeader}>{this.props.totalUsage}</Text>
        <Text style={styles.timeInfoSubHeader}>Total (hrs)</Text>
    </View>
</ListItem>
</List>;

样式表:

  timeInfoHeader: {
    fontSize: 40,
    color: 'rgba(45, 145, 176, 100)',
    textAlign: 'center'
  },

  timeInfoSubHeader: {
    fontSize: 12,
    color: 'rgba(209, 209, 209, 100)',
    paddingBottom: 4,
    marginBottom: 4,
    textAlign: 'center'
  },

  listitem: {
    width: '100%',
    marginLeft: 0
  },  

推荐答案

尝试一下

listitem: {
   marginLeft: 0,
   flex:1,
   paddingRight: 0
}

这篇关于React Native:Flex:1不填充父级的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！