1

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

我正在尝试展示一些带有图像的卡片，但无法删除卡片底部的空白。我想图像以适合容器（卡）。我也尝试在 Card 组件中使用单独的 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>

组件渲染如下（图像下方的空白区域）

在此处输入图像描述

4

1 回答 1

1

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

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

本机基础主题/组件/CardItem.js

paddingVertical: variables.cardItemPadding - 5,

参考链接

或者

使用视图、图像背景和文本而不是卡片。

例子.js：

<View>
<Imagebackground>
<Text> </Text>
</Imagebackground>
</View>
于 2019-04-05T14:48:47.493 回答