Fatal编程技术网
  • react-native/
  • React native 未应用本机基本ListItem样式-外观已损坏

React native 未应用本机基本ListItem样式-外观已损坏

react-native

React native 未应用本机基本ListItem样式-外观已损坏,react-native,native-base,React Native,Native Base,我有一个新安装的native base+expo，我正在尝试列出一个清单。通常，没问题，但今天有些事情不对劲 以及生成此列表的代码 <Container> <Content> <List> <ListItem avatar> <Left> <Thumbnail source={{ uri: 'http://i.pravatar.cc/100' }} /

我有一个新安装的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>
实际上，根据本机基本文档，它实际上应该是这样的：

class App extends React.Component {
它似乎没有应用很多由道具驱动的样式。例如，第二行文字上的注释道具不适用，我假设高度被打破，因为列表中的化身道具本身不适用

有什么建议吗？

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

class App extends React.Component {
但对于NativeBase来说，要正确地拾取东西，您需要导入组件并像这样使用它

import React, {Component} from 'react';
class App extends Component {
然后一切都正常了：

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

class App extends React.Component {
但对于NativeBase来说，要正确地拾取东西，您需要导入组件并像这样使用它

import React, {Component} from 'react';
class App extends Component {
然后一切都正常了：

我在车身上添加了最小高度造型

<Body style={{ minHeight: 70 }}>
    <Text>Awesome group</Text>
    <Text note>Awesome group</Text>
</Body>
查看“最小高度”的值适用于您的情况

我为车身添加了“最小高度”样式

<Body style={{ minHeight: 70 }}>
    <Text>Awesome group</Text>
    <Text note>Awesome group</Text>
</Body>
查看“最小高度”的值适用于您