CardList React Native

Question

我是React的新手，想知道是否有人可以帮助我。 我正在尝试创建卡片列表。 我已经完成了这一部分，但是我在卡内显示的图像无法正确渲染。 整个卡变成行大小的1/12。 如果删除“列表”部分，则卡片会正确渲染。

以下是我的代码：

 import React, { Component } from "react";
import { Image } from "react-native";
import {
  Container,
  Header,
  Title,
  Content,
  Text,
  Button,
  Icon,
  FooterTab,
  Left,
  Right,
  Card,
  CardItem,
  Thumbnail,
  ListItem,
  List,
  Body
} from "native-base";

import styles from "./styles";

const datas = [
  {
    route: "Header1",
    text: "Only Title",
    restImage: require("../../../assets/restaurants/Mc.png")
  },
  {
    route: "Header2",
    text: "Icon Buttons",
    restImage: require("../../../assets/restaurants/Mc.png")
  }
];


const logo = require("../../../assets/logo.png");
//const cardImage = require("../../../assets/Mc.png");
//const cardImage2 = require("../../../assets/NY.png");

class Anatomy extends Component {
  render() {
    return (
      <Container style={styles.container}>
      <Header
        style={{ backgroundColor: "#FFAB00" }}
        androidStatusBarColor="#FF8F00"
        iosBarStyle="light-content"
      >
          <Left>
            <Button
              transparent
              onPress={() => this.props.navigation.navigate("DrawerOpen")}
            >
              <Icon name="ios-menu" />
            </Button>
          </Left>
          <Body>
            <Title>Rests</Title>
          </Body>
          <Right />
        </Header>

        <Content padder>

        <List
          dataArray={datas}
          renderRow={data =>
            <ListItem>
            <Card style={styles.mb}>
              <CardItem cardBody>
                <Image
                  style={{
                    resizeMode: "cover",
                    width: null,
                    height: 200,
                    flex: 1
                  }}
                  source={data.restImage}
                />
              </CardItem>

              <CardItem style={{ paddingVertical: 0 }}>
                <Left>
                  <Button transparent>
                    <Icon active name="thumbs-up" />
                    <Text>4923 Likes</Text>
                  </Button>
                </Left>
                <Body>
                  <Button transparent>
                    <Icon active name="chatbubbles" />
                    <Text>89 Comments</Text>
                  </Button>
                </Body>
                <Right>
                  <Text
                    button
                    onPress={() => this.props.navigation.navigate(data.route)}
                  >2KM away</Text>
                </Right>
              </CardItem>
            </Card>
            </ListItem>
          }
          />
        </Content>

      </Container>
    );
  }
}

export default Anatomy;

Answer 1

我设法解决了。 做了一些研究，并在卡片上添加了以下样式。

<Card style={{ flex: 1 }}>

这为我解决了渲染问题。