Компонент карточки с изображением не полностью помещается на карточке

Нижнее пространство в карточном компоненте с реквизитом изображения.

Я пытаюсь показать некоторые карты с изображениями, но не могу удалить пробел в нижней части карты. Я хочу, чтобы изображение соответствовало контейнеру (карте). Я также пытался использовать отдельный компонент изображения внутри компонента карты, но безуспешно. Я пытался отлаживать с помощью React devTools, но он всегда вылетает, когда я расширяю элемент карты в инструментах разработчика, говоря «недопустимая высота и ширина текста».

Я использовал этот код для отображения карт с изображениями:

            <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>

Компонент отображается, как показано ниже (пробел под изображением).

введите здесь описание изображения


react-native react-native-elements
person Rahul Boinepally    schedule 05.04.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

ListItem, Card и CardItems, у каждого из них есть собственные отступы или поля. Вы можете просто осмотреть экран, проверить его и удалить отступы/поля в соответствии с вашими требованиями, используя стиль. Или вы можете извлечь тему NativeBase (настроить) и внести изменения в тему этих компонентов. Таким образом, у вас будут одинаковые стили для этих компонентов во всем приложении.

Вероятно, вы ищете недвижимость paddingVertical. Вы можете добавить отрицательное значение, а затем отредактировать стиль компонента, как обычно.

родная база-тема/компоненты/CardItem.js

paddingVertical: variables.cardItemPadding - 5,

ссылка

OR

Используйте View, Imagebackground и Text вместо Card.

пример.js:

<View>
<Imagebackground>
<Text> </Text>
</Imagebackground>
</View>
person hong developer    schedule 05.04.2019
comment
Спасибо. Я попробовал ImageBackground до использования Cards, но хотел почувствовать Card в приложении. Я также пытался проверить компонент карты, но я не смог расширить элемент карты, я получаю исключение NaN для компонента карты в инструментах разработки реагирования. Я не вижу компонент cardItem в react-native-elements, он отсутствует в документации? - person Rahul Boinepally; 05.04.2019
comment
Разве CardItem react-native-element не native-base? - person hong developer; 08.04.2019
comment
Компонент Card, который я использовал, взят из react-native-element. Я просто использую Imagebackground и Text в FlatList, чтобы добиться внешнего вида карты. - person Rahul Boinepally; 08.04.2019