本机基础 ListItem 样式未应用 - 看起来已损坏答案

【问题标题】：Native Base ListItem styles not applying - look broken本机基础 ListItem 样式未应用 - 看起来已损坏
【发布时间】：2019-03-22 11:57:30
【问题描述】：

我有一个全新安装的原生 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 道具不适用。

有什么建议吗？

【问题讨论】：

标签： react-native native-base

【解决方案1】：

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

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

看看最小高度的值对你有用

【讨论】：

【解决方案2】：

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

class App extends React.Component {

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

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

然后一切正常：)

【讨论】：