Question

我正在尝试创建动态网格，但它不起作用。我已经在逻辑上做了正确的事情，但仍然没有工作。

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

import { Col, Row, Grid } from "react-native-easy-grid";


const cards = [
  {
    id:1,
    text: 'Card One',
    name: 'One',
    image: require('../images/icons.png'),
  },
  {  id:2,
    text: 'Card Two',
    name: 'Two',
    image: require('../images/icons.png'),
  },
  {
     id:3,
    text: 'Card Three',
    name: 'Three',
    image: require('../images/icons.png'),
  },
  {
     id:4,
    text: 'Card Four',
    name: 'Four',
    image: require('../images/icons.png'),
  },
{    id:5,
    text: 'Card One1',
    name: 'One',
    image: require('../images/icons.png'),
  },
  {
     id:6,
    text: 'Card Two1',
    name: 'Two',
    image: require('../images/icons.png'),
  },
  {
     id:7,
    text: 'Card Three1',
    name: 'Three',
    image: require('../images/icons.png'),
  },
  {
     id:8,
    text: 'Card Four1',
    name: 'Four',
    image: require('../images/icons.png'),
  },
{
     id:9,
    text: 'Card One2',
    name: 'One',
    image: require('../images/icons.png'),
  },
  {
     id:10,
    text: 'Card Two2',
    name: 'Two',
    image: require('../images/icons.png'),
  },
  {
     id:11,
    text: 'Card Three2',
    name: 'Three',
    image: require('../images/icons.png'),
  },
  {
     id:12,
    text: 'Card Four2',
    name: 'Four',
    image: require('../images/icons.png'),
  },

];

export default class Tab2 extends Component {

  render() {

const gridItems = [] ;
const rowItem  = [];

  for(let i = 1; i < cards.length; i++){
    if(i%4 != 0){
      let j=i-1;
      rowItem.push(<CardItem style={{flexGrow: 1}}>
                  <Left>
                    <Thumbnail source={cards[j].image} />
                    <Body>
                      <Text>{cards[j].text}</Text>
                      <Text note>NativeBase</Text>
                    </Body>
                  </Left>
                </CardItem > 
                );

    }else if(i%4 == 0){
      gridItems.push(<Row style={{flex: 1}}>  { rowItem } </Row>);
      rowItem.splice(0,rowItem.length);

    }

  }

    return (
      <Container>
      <Content>
    <Grid>
    {gridItems}
    </Grid>


 </Content>

      </Container>
    );
  }
}

获取错误com.facebook.react.uimanager.IllegalViewOperationException：尝试添加未知的视图标记 我也发布了错误，但没有人回应 https://github.com/GeekyAnts/react-native-easy-grid/issues/58

动态网格视图无法正常工作react-native-easy-grid

0 个答案: