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

我为身体增加了最小高度样式

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

看看最小身高值对您有用

Answer 2

好吧，事实证明这是因为我有这样的扩展设置：

class App extends React.Component {

但是，要使NativeBase能够正确处理，您需要导入Component并像这样使用它

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

然后一切都可以工作：）

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

2 个答案: