reactjs - 如何在 NativeBase 中渲染数组中的卡片项？-6ren

reactjs - 如何在 NativeBase 中渲染数组中的卡片项？

转载作者：行者123 更新时间：2023-12-03 14:20:11

26

4

我的代码无法运行。我想从对象数组中渲染卡片。然而，使用 NativeBase 似乎很难。

CardsScreen.js:

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

class CardsScreen extends Component {
  props:Props;


  DATA = [
 { id: 1, title: 'Lorem ipsum dolor sit amet, everti rationibus his cu', views:'200', comments:'9', published:'4h ago' image: require('../img/img1.jpeg') },

 { id: 2, title: 'Lorem ipsum dolor sit amet, everti rationibus his ', Views:'700', comments:'16', published:'9h ago' image: require ('../img/img2.jpg') },

 { id: 3, title: 'Lorem ipsum dolor sit amet, everti rationibus hi', Views:'698', comments:'8', published:'14h ago' image:require ('../img/img3.jpeg') },

 ];

  render() {

    let renderpostTypes = () => {

      let post = [];


      this.DATA.map( ( item )=> {

        post.push(

          <Content  key={item.id}>

             <Card>
            <CardItem>
              <Left>
                <Thumbnail source={require(item.image)} />
                <Body>
                  <Text>item.title</Text>
                  <Text note>GeekyAnts</Text>
                </Body>
              </Left>
            </CardItem>
            <CardItem cardBody>
              <Image source={require(item.image)} style={{height: 200, width: null, flex: 1}}/>
            </CardItem>
            <CardItem>
              <Left>
                <Button transparent>
                  <Icon active name="thumbs-up" />
                  <Text>item.views</Text>
                </Button>
              </Left>
              <Body>
                <Button transparent>
                  <Icon active name="chatbubbles" />
                  <Text>item.comments</Text>
                </Button>
              </Body>
              <Right>
                <Text>item.published</Text>
              </Right>
            </CardItem>
          </Card>
          </Content>
        );
      } );

      return post;
    };

    return (
      <Container>

        <Content >
          {renderpostTypes()}
        </Content>
      </Container>);
  }
}
export default CardsScreen;

我怎样才能让它工作并从该对象数组中渲染卡片？有没有解决这个问题的例子？

最佳答案

我已经尝试过你的代码，它在我的设备上有效。但如果您想在 native 基础中使用数组来渲染卡，我有一个示例代码，这是代码:

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
import { Container, Header, Content, Card, CardItem, Thumbnail, Text, Button, Icon, Left, Body, Right } from 'native-base';

class CardsScreen extends Component {
  constructor(props) {
      super(props);
      this.state = {
        DATA : [
          { id: 1, title: 'Lorem ipsum dolor sit amet, everti rationibus his cu', views:'200', comments:'9', published:'4h ago', image: '../img/img1.jpeg' },

          { id: 2, title: 'Lorem ipsum dolor sit amet, everti rationibus his ', Views:'700', comments:'16', published:'9h ago', image: '../img/img1.jpeg' },

          { id: 3, title: 'Lorem ipsum dolor sit amet, everti rationibus hi', Views:'698', comments:'8', published:'14h ago', image: '../img/img1.jpeg' },
        ],
      }
  }
  render() {
    return (
      <Container>
        <Content>
        {this.state.DATA.map((item, index) => {
          return(
            <Card key={index} >
              <CardItem>
                <Left>
                  <Thumbnail  source={require(item.image)}/>
                  <Body>
                    <Text>{item.title}</Text>
                    <Text note>GeekyAnts</Text>
                  </Body>
                </Left>
              </CardItem>
              <CardItem cardBody>
                 <Image source={require(item.image)} style={{height: 200, width: null, flex: 1}} />
              </CardItem>
              <CardItem>
                <Left>
                  <Button transparent>
                    <Icon active name="thumbs-up" />
                    <Text>{item.views}</Text>
                  </Button>
                </Left>
                <Body>
                  <Button transparent>
                    <Icon active name="chatbubbles" />
                    <Text>{item.comments}</Text>
                  </Button>
                </Body>
                <Right>
                  <Text>{item.published}</Text>
                </Right>
              </CardItem>
            </Card>
          );
        })}
        </Content>
      </Container>);
  }
}

AppRegistry.registerComponent('ExampleApps', () => CardsScreen);

希望能帮到你:)

关于reactjs - 如何在 NativeBase 中渲染数组中的卡片项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45409554/

26

4

0

文章推荐： reactjs - 如何使用 ESLint 捕获 React 中未声明的变量？

文章推荐： reactjs - 为什么渲染函数没有在react中调用？

文章推荐： reactjs - Axios 在 Actions Redux 中调用

文章推荐： reactjs - 如何使用 React JS 选择表单元素？

Java对象数组错误(卡片)
让我们开始吧，3 个类(Card、Start、Deckofcards) 1° 卡: public class Card { private String type; private i
Java如何返回枚举值和名称(卡片)
我要创建一个二十一点游戏，我正在尝试弄清楚如何发牌并让它显示值和名称。我选择两个属性的原因纯粹是基于逻辑，当涉及到将 A 视为 1 或 11 时。还没有达到这一点，只是想如果有人想知道的话我会包括在内
默认情况下不展开 Twitter 卡片
我正在尝试使用 twitter 元标记(以及 Facebook 等其他网站的 Open Graph)创建 Twitter 卡片。当我看到来自其他人(例如 NPR 新闻)的推特提要时，卡片会默认展开。
Java PokerGame 卡片
我正在开发一个玩基本扑克游戏的程序，但这并不重要。我有一组 52 张牌，包含花色和等级。我想打印 4 行 13 行的值(花色和等级)。这可能是一个简单的问题，但我整天都在努力解决这个问题。因此，我非常
html - 具有相同高度和响应式的 Bootstrap 卡片
我开发了一个包含三列(两列相等，一列较小)的网格。我的问题是我无法在卡片上设置高度，我在 px 中使用了它们并且它起作用了，但这不是最好的方法。我希望这三列具有相同的高度(页面的 100%)并且一些卡
html - Bootstrap 卡片 - 卡片中的文字
我在 4 个不同的列中开发了 4 个 Bootstrap 卡。在每张卡片中，我创建了一张包含某种类型信息的新卡片。我的问题是，当我缩小屏幕尺寸(响应测试)时，文本会从卡片中溢出。我的问题是什么，我该
css - 具有垂直可滚动卡片文本的固定高度 Bootstrap 卡片
我怎样才能达到固定高度具有垂直可滚动的 bootstrap 4 卡卡片文字部分？ Card title This portion and
javascript - 将附件添加到 Trello 卡片
在我的程序中，我有一个大 Canvas ，我在其中提取多个选定区域并将这些区域绘制到单独的新小 Canvas 上。我想使用此 API 将新创建的 Canvas 作为附件发布到 trello POST
Android - 卡片 View 的动态大小
我想在卡片 View 中显示联系信息，如果需要，应该调整卡片 View 的大小以包含所有信息。这是布局部分: 但是 an
android - 卡片 View 阴影未显示
这是我的card_view。我已经提到了 card_view:cardElevation。但是仍然没有显示阴影。我搜索了很多链接。他们在任何地方都提到要使用 card_view:cardElevat
Android - 卡片 UI 框架
我正在使用此处的框架 - cardsui 如何在卡片顶部添加分享按钮。我已经使用点击方法在 xml 中实现了它，但是当我按下它时应用程序崩溃并说该方法不存在(是的，我将该方法添加到主 java 文件中
android - 卡片 View 之间的距离太大
我正在将 cardview 与 recycler view 一起使用。但早些时候我使用相同的代码来做事没有任何问题。但现在我正在使用 fragment 。现在我得到卡片 View 之间的距离更大。我的
android - 卡片 View 背景颜色影响阴影颜色
我的卡片 View 设置如下: android:layout_marginTop="2dp" android:layout_marginLeft="6dp" android:layout_margin
c++ - 对结构数组(卡片)进行排序
我正在制作一个二十一点游戏，并创建了一个数组来充当用户发牌的手牌。我希望能够对其进行排序，以便手按数字顺序排序，这样可以更简单地确定用户的手的类型。这是我的卡片结构: struct ACard{
html - 如何自动化 Twitter 卡片？
我希望在一个运行在 Wordpress 上的网站上实现 Twitter Cards(关于 Twitter Cards 的文档在这里:https://dev.twitter.com/docs/cards
html - Bootstrap 卡片/卡片列破坏
我需要帮助解决这个难题。在 bootstrap 4.1 中使用卡片列和卡片时，当我不想这样做时，行会中断。我将列数设置为 4，当有 4 张卡片时，它看起来很完美。当添加第五张牌时，它会将行分成顶部的
Android 卡片 View 在卡片之间有细灰线
我有一个 android ListView ，它显示类似卡片的 View ，正如您在这张图片中看到的，我的卡片之间有一条灰色细线: 我怎样才能摆脱灰线？我实现这个卡片 View 的xml是这样的:
java - 卡片 View 不可见
我正在尝试添加带有回收站 View 的卡片 View 。但它没有显示任何内容，只是一个空白 View 。我在这里看到了这方面的问题，它有为回收站 View 和卡片 View 添加依赖项的答案。这出现
android - 卡片 View 未显示
我在 android 中通过回收站 View 实现卡片 View ，但我的卡片 View 没有显示。我正在使用自定义适配器将数据填充到卡片 View 。我已经尝试了所有方法，但没有显示卡片 View
android - 卡片 View 缩放动画
在我的应用程序中，我有一个卡片 View ，其中包含一个 TextView 和一个按钮，该按钮最初是隐藏的，当单击卡片 View 时，会显示该按钮。我不知道如何在显示按钮时将其设置为动画。任何人都可以

首页

博学

6Ren·AI

商城

reactjs - 如何在 NativeBase 中渲染数组中的卡片项？