javascript - React-Native native-base How to decrease the spacing between card Items? - Stack Overflow

admin管理员组

文章数量:1291043

render() {
  return(
    <Card style={{  padding: 0 }}>
      <CardItem listItemPadding={0} header style=styles.Card}>
        <Text style={styles.cardText}>
          {this.props.library.title}
        </Text>
      </CardItem>
    </Card>
  );
}

The docs say that listItemPadding can be used but it's not working I have tried to change the padding of to 0 but it's not working either.

render() {
  return(
    <Card style={{  padding: 0 }}>
      <CardItem listItemPadding={0} header style=styles.Card}>
        <Text style={styles.cardText}>
          {this.props.library.title}
        </Text>
      </CardItem>
    </Card>
  );
}

The docs say that listItemPadding can be used but it's not working I have tried to change the padding of to 0 but it's not working either.

• javascript
• react-native

Share Improve this question Follow edited Mar 15, 2019 at 20:20 Abraham 9,88566 gold badges5656 silver badges5858 bronze badges asked Jan 9, 2018 at 11:02 Sai KrishnaSai Krishna 55722 gold badges1212 silver badges2828 bronze badges 1

• Check this out: Github issues #1219 – Nay Commented Dec 23, 2018 at 19:27

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Use the cardBody attribute in cardItem it will work.

I see that you are trying to use listItemPadding prop which doesn't exist at the moment.

ListItem, Card and CardItems, each have some padding or margin of their own. You can just inspect the screen, check it and remove the padding/margin as per your requirement using style. Or you can eject NativeBase theme (Customize) and do your changes in the theme of those ponents. That way you will have the same styles for those ponents in your whole app.

Probably you are looking for a paddingVertical property. You can add a negative value and then edit your ponent style as you will normally do.

native-base-theme/ponents/CardItem.js

paddingVertical: variables.cardItemPadding - 5,

Then on your ponent:

render() {
  return(
    <Card style={{  padding: 10 }}>
      <CardItem header style={{ paddingTop: 10 }}>
        <Text>Item</Text>
      </CardItem>
    </Card>
  );
}

try this code:

render() {
        return(

<View style={{  flex: 0,
 elevation: 3,
 shadowColor: "#000",
 shadowOpacity: 0.1,
 shadowOffset: { width: 0, height: 2 },
 shadowRadius: 1.0,
 marginVertical: 1,
 borderRadius: 2,
 marginHorizontal: 1,
 margin: 0,
 padding: 0,
borderWidth: 0, }}>

                 <CardItem listItemPadding={0} header style=styles.Card}>
                     <Text style={styles.cardText}>
                         {this.props.library.title}
                     </Text>
                 </CardItem>

             </View>

        );
    }

you can use marginTop

const styles = StyleSheet.create({
    shadowOffset: { width: 0, height: 5 },
        shadowRadius: 6,
        shadowOpacity: 0.26,
        elevation: 8,
        backgroundColor: 'white',
        padding: 20,
        borderRadius: 10,
        paddingTop: 20,
        width: 400,
        maxWidth: '50%',
        marginTop: 10,
});

To control the padding, put all the sides...

paddingLeft: 0, paddingRight: 0, paddingTop: 0, paddingBottom: 0

...you can then put the appropriate padding number in any of the sides. But declare padding for all the four sides.

本文标签： javascriptReactNative nativebase How to decrease the spacing between card ItemsStack Overflow