React-Native native-base 如何減少卡片項目之間的間距？

Question

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

文檔說可以使用listItemPadding但它不起作用我試圖將填充更改為 0 但它也不起作用。

Answer 1

使用在cardItem的cardBody屬性會工作。

Answer 2

我看到您正在嘗試使用目前不存在的listItemPadding道具。

ListItem 、 Card和CardItems ，每個都有自己的一些填充或邊距。 您只需檢查屏幕，檢查它並根據您的要求使用樣式刪除填充/邊距。 或者您可以彈出 NativeBase 主題（自定義）並在這些組件的主題中進行更改。 這樣，您將在整個應用程序中為這些組件使用相同的樣式。

可能您正在尋找paddingVertical屬性。 您可以添加一個負值，然后像往常一樣編輯組件樣式。

本機基礎主題/組件/CardItem.js

paddingVertical: variables.cardItemPadding - 5,

然后在您的組件上：

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

Answer 3

試試這個代碼：

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>

        );
    }

Answer 4

你可以使用 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,
});

Answer 5

要控制填充，請將所有邊...

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

...然后您可以在任何一側放置適當的填充編號。 但是聲明所有四個邊的填充。