React Native: Flex: 1 does not fill width of parent

问题

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?

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>;

Stylesheet:

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

回答1:

Try this

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

回答2:

Just add width: '100%' on your view's styles.

回答3:

Try this code snippet:

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

回答4:

What causes this is the textAlign style on the timeInfoHeader. So you can either remove the textAlign style from timeInfoHeader or add a width: "100%" to listitem. Just glancing at your code, it seems you might be better off adding the textAlign to the child View of timeInfoHeader.

来源：https://stackoverflow.com/questions/48269832/react-native-flex-1-does-not-fill-width-of-parent

标签

css

react-native

flexbox