Question

带有图像道具的卡片组件的底部空间。

我正在尝试显示一些带有图像的卡片，但无法删除卡片底部的空白。我想成像以适合容器（卡）。我也尝试过在Card组件中使用sepearte Image组件，但是没有运气。我尝试使用react devTools进行调试，但是当我在开发工具中扩展Card元素时说“文本上的高度和宽度无效”时，它总是崩溃。

我已经使用此代码来渲染带有图像的卡片：

            <FlatList data ={
              [
                {key : '1', title : 'Hello1', image : require('./images/kebabs.jpg'), },
                {key : '2', title : 'Hello2', image : require('./images/kebabs.jpg'), },
                {key : '3', title : 'Hello3', image : require('./images/kebabs.jpg'), },
                {key : '4', title : 'Hello4', image : require('./images/kebabs.jpg'), },
                {key : '5', title : 'Hello5', image : require('./images/kebabs.jpg'), },
                {key : '6', title : 'Hello6', image : require('./images/kebabs.jpg'), },
                {key : '7', title : 'Hello7', image : require('./images/kebabs.jpg'), }

              ]
            }

            renderItem={
              ({item})  =>
                <TouchableOpacity onPress={() => {this.handleNavigate()}}>
                    <Card
                        containerStyle={{paddingTop: 1}}                        
                        featuredTitle = {item.title}
                        image ={item.image}
                        imageProps={{resizeMode: 'cover'}}
                        imageStyle={{width : '100%', minWidth : '100%', height : 60}}                        
                        >
                    </Card>                        
                </TouchableOpacity>
              }
              ItemSeparatorComponent = {this.FlatListItemSeparator}
              />
        </ImageBackground>

该组件呈现如下（图像下方的空白）

Answer 1

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

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

native-base-theme / components / CardItem.js

paddingVertical: variables.cardItemPadding - 5,

reference link

OR

使用View，Imagebackground和Text代替Card。

example.js：

<View>
<Imagebackground>
<Text> </Text>
</Imagebackground>
</View>

带有图像的卡片组件不完全适合卡片

1 个答案: