繁体   English   中英

CardList React Native

CardList React Native

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我是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;
1 个回复

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

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

这为我解决了渲染问题。

4 Java中的空CardList对象

我现在有一个小问题。 目前我有两节课。 一个叫CardList,另一个叫Trick。 CardList听起来很像,它是一个将自身声明为arraylist并具有多个添加方法的对象。 特技应该是CardList并扩展CardList类。 此刻,每当我在Trick中使用add方法时 ...

2012-10-01 00:55:10 2 47   java
6 更改状态时不会调用Cardlist组件

我是反应js的新手,我的代码有问题。 我有一个Cardlist组件,当我将其联系人列表传递给它时,它会返回我的联系人列表布局。 我添加了一个搜索框来搜索特定的联系人。 该列表在搜索框中输入一些文本后进行了更新(我在控制台中将其注销,并且工作正常)。 更改搜索文本后,render和retu ...

2019-07-03 18:01:58 1 24   reactjs
7 React Native中的原生广告

如何在React Native中实现AdMob的原生广告? 我发现的最好的是react-native-admob ,但它只能修复横幅和全屏插页式广告。 如何在我的React Native应用中使用AdMob或任何其他原生广告提供商实施原生广告? ...

9 反应原生.then(()=> {

我想在React Native中实现一个List-View的Pull-to-Refresh。 ... .... .... .... 我收到以下错误:无法读取未定义的属性“ then”。 我是否必须在_refreshData函数中实现某种形式的返回,还是另 ...

10 本机到React本机调用

我需要不时地将数据从Native发送到React Native。 这样做的最好方法是什么。 我知道我们有本Native Modules ,它允许我们从React本机向本机端进行调用,但是我想做相反的事情。 有人可以分享一些例子吗? (我不想使用初始的Props,因为我必须根据本机端收 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM