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

Question

我正在使用从native-base导入的ListItem。 ListItem为红色，它的子视图为黄色。正如您从屏幕截图中看到的那样，View样式并不占用ListItem的整个宽度，尽管有一个flex：1。我如何才能使View成为ListItem的整个宽度？

See image here

 <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

只需在视图的样式上添加width: '100%'即可。

Answer 2

试试这个

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

Answer 3

导致这种情况的原因是textAlign上的timeInfoHeader样式。因此，您可以从textAlign移除timeInfoHeader样式，也可以将width: "100%"添加到listitem。只是看一下你的代码，你可能最好将textAlign添加到timeInfoHeader的子视图中。

Answer 4

尝试以下代码段：

<ScrollView contentContainerStyle={{ flexGrow: 1 }} >
<View style={{ flex: 1 }} >
...
</View >
</ScrollView >

Answer 5

你可以试试这个—— flexGrow: 1

希望对某人有所帮助=)