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

尝试此代码：

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 2

我看到您正在尝试使用doesn't exist at the moment的 listItemPadding 道具。

ListItem，Card和CardItems，每个都有自己的填充或边距。您可以根据需要使用样式检查屏幕，检查屏幕并删除填充/边距。或者，您可以弹出NativeBase主题（Customize）并在这些组件的主题中进行更改。这样，您整个应用程序中的那些组件将具有相同的样式。

可能您正在寻找 paddingVertical 属性。您可以添加一个负值，然后像平常一样编辑组件样式。

native-base-theme / components / CardItem.js

paddingVertical: variables.cardItemPadding - 5,

然后在您的组件上：

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

Answer 3

使用 cardItem 中的 cardBody 属性将起作用。

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

...然后，您可以将适当的填充编号放在任意一侧。但要声明所有四个边的填充。

React-Native native-base如何减少卡片项之间的间距？

5 个答案: