本机基础 ListItem 样式不适用 - 看起来坏了

Question

我全新安装了 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>

真的，根据原生基础文档，它实际上应该是这样的：

它似乎并没有应用很多由道具驱动的样式。例如，文本第二行的 note 道具不适用，我认为高度已损坏，因为列表本身的 avatar 道具不适用。

有什么建议吗？

Answer 1

好的，原来这是因为我有这样的扩展设置：

class App extends React.Component {

但是为了让 NativeBase 正确地获取东西，你需要导入 Component 并像这样使用它

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

然后一切正常:)

Answer 2

我为正文添加了最小高度样式

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

查看适合您的最低身高值

本机基础 ListItem 样式不适用 - 看起来坏了

Native Base ListItem styles not applying - look broken

react-native

native-base