React Native NativeBase技术问题：如何减小Card Items间的间距？

Hey there, I’ve run into this exact issue with NativeBase’s Card components before—those default paddings and margins can be tricky! Let’s break down why your current approach isn’t working and how to fix it:

Why listItemPadding and Card padding aren’t working #

• The listItemPadding property is actually designed for NativeBase List components, not CardItem. That’s why setting it here has no effect.
• While setting padding: 0 on the Card removes the container’s padding, the main spacing you’re seeing comes from the CardItem’s own default padding and margin, not the Card itself.

Solution: Override CardItem’s default styles #

The simplest fix is to directly adjust the vertical padding and margin on the CardItem component itself. Here’s your modified code:

render() {
  return(
    <Card style={{ padding: 0 }}>
      <CardItem 
        header 
        style={{
          paddingVertical: 0, // Remove vertical padding inside the CardItem
          marginVertical: 0, // Remove vertical margin between CardItems
          borderBottomWidth: 0 // Optional: Remove the default bottom border if you don't need it
        }}
      >
        <Text style={styles.cardText}>
          {this.props.library.title}
        </Text>
      </CardItem>
      {/* Repeat the style for any additional CardItems to keep spacing consistent */}
    </Card>
  );
}

Extra tips #

• If you have multiple CardItems and want to apply this style globally, create a reusable style object:

  const styles = StyleSheet.create({
    compactCardItem: {
      paddingVertical: 0,
      marginVertical: 0,
      borderBottomWidth: 0
    },
    // ... your other styles
  });
  

  Then use <CardItem style={styles.compactCardItem} ...> for each item.
• For newer NativeBase versions (v3+), you might need to use the _header prop to customize header styles:

  <CardItem
    header
    _header={{
      paddingVertical: 0,
      marginVertical: 0
    }}
  >
    {/* ... */}
  </CardItem>
  

This should eliminate that unwanted spacing between your CardItems. Let me know if you run into any other snags!

内容的提问来源于stack exchange，提问作者Sai Krishna