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 }}>

這為我解決了渲染問題。

CardList React Native

問題描述

以下是我的代碼：

1 個解決方案

解決方案1
0 已采納 2018-11-21 22:12:28

CardList React Native

問題描述

以下是我的代碼：

1 個解決方案

解決方案1 0 已采納 2018-11-21 22:12:28

解決方案1
0 已采納 2018-11-21 22:12:28