React Native：Flex：1不填充父级的宽度

Question

我正在使用从本机库导入的 ListItem。ListItem 是红色的，它的子 View 是黄色的。正如您从屏幕截图中看到的，尽管具有 Flex，View 样式并不占据 ListItem 的整个宽度： 1. 如何才能使 View 占据 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
  },  

Answer 1

尝试这个

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