Блог

Главная - Вопросы по программированию - Неприменимые стили базового списка — выглядят сломанными

Неприменимые стили базового списка — выглядят сломанными

#react-native #native-base

#реагировать-native #native-base

Вопрос:

У меня новая установка native base expo, и я пытаюсь составить список. Обычно проблем нет, но сегодня что-то просто не так.

Неработающие списки

И код, который составляет этот список.

 <Container>
    <Content>
      <List>
        <ListItem avatar>
          <Left>
            <Thumbnail source={{ uri: 'http://i.pravatar.cc/100' }} />
          </Left>
          <Body>
          <Text>Awesome group</Text>
          <Text note>Awesome group</Text>
          </Body>
          <Right>
            <Text>2/13</Text>
          </Right>
        </ListItem>
        <ListItem avatar>
          <Left>
            <Thumbnail source={{ uri: 'http://i.pravatar.cc/100' }} />
          </Left>
          <Body>
          <Text>Awesome group</Text>
          <Text note>Awesome group</Text>
          </Body>
          <Right>
            <Text>1/2</Text>
          </Right>
        </ListItem>
        <ListItem avatar>
          <Left>
            <Thumbnail source={{ uri: 'http://i.pravatar.cc/100' }} />
          </Left>
          <Body>
          <Text>Awesome group</Text>
          <Text note>Awesome group</Text>
          </Body>
          <Right>
            <Text>22/103</Text>
          </Right>
        </ListItem>
      </List>
    </Content>
  </Container>

Действительно, согласно документам native base, на самом деле это должно выглядеть так:

Что я ожидаю увидеть

Похоже, что он не применяет большую часть стилей, полученных из реквизитов. Например, note реквизит во второй строке текста не применяется, и я предполагаю, что высоты нарушены, потому что avatar реквизит самого списка не применяется.

Есть предложения?

Ответ №1:

я добавил стиль минимальной высоты в тело

 <Body style={{ minHeight: 70 }}>
    <Text>Awesome group</Text>
    <Text note>Awesome group</Text>
</Body>

посмотрите, какое значение минимальной высоты будет работать для вас

Ответ №2:

Хорошо, оказывается, это потому, что у меня была настройка extends следующим образом:

 class App extends React.Component {

Но для того, чтобы NativeBase правильно подбирала параметры, вам нужно импортировать компонент и использовать его следующим образом

 import React, {Component} from 'react';
class App extends Component {

И тогда все это просто работает 🙂