Shoutem UI中的卡无法正常工作

Question

我正在尝试来自Card的docuementation的shoutem-ui示例，但它没有显示完整内容 这是我的.js文件

import React, { Component } from 'react';
import {
  View,
  Subtitle,
  Card,
  Image,
  Caption
} from '@shoutem/ui'

export default class MyApp extends Component {
  render() {
    return (
      <Card>
        <Image
          styleName="medium-wide"
            source={{uri: 'https://shoutem.github.io/img/ui-toolkit/examples/image-10.png'}}
        />
        <View styleName="content">
          <Subtitle>Choosing The Right Boutique Hotel For You</Subtitle>
          <Caption>21 hours ago</Caption>
        </View>
      </Card>
    );
  }
}

我的模拟器的屏幕截图

请帮我解决这个问题。感谢

Answer 1

您需要通过将其flex设置为0来覆盖View的样式。

在显示全角卡的情况下：将卡的宽度设置为空。

<Card style={{ width: null }}>
  ...
  <View style={{ flex: 0 }}>
    ...
  </View>
</Card>