FlatList неправильно рендерится - PullRequest
Новая
       7

FlatList неправильно рендерится

0 голосов
/ 12 января 2019

Я использую FlatList, и он не дает желаемого вывода.

Вот мой код:

App.js 

import React from 'react';
import Main from './components/MainComponent';

export default class App extends React.Component {
  render() {
    return (
      <Main />
    );
  }
}

MainComponent.js 

import React, { Component } from 'react';
import Menu from './MenuComponent';
import { DISHES } from '../shared/dishes';

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dishes: DISHES
    };
  }

  render() {

    return (
        <Menu dishes={this.state.dishes} />
    );
  }
}

export default Main;

MenuComponent.js 

import React from 'react';
import { View, FlatList } from 'react-native';
import { ListItem } from 'react-native-elements';

function Menu(props) {

    const renderMenuItem = ({item, index}) => {

        return (
                <ListItem
                    key={index}
                    title={item.name}
                    subtitle={item.description}
                    hideChevron={true}
                    leftAvatar={{ source: require('./images/uthappizza.png')}}
                  />
        );
    };

    return (
            <FlatList 
                data={props.dishes}
                renderItem={renderMenuItem}
                keyExtractor={item => item.id.toString()}
                />
    );
}

export default Menu;

Ошибка:

Я получаю следующий вывод, который не нужен.

изображение результата

Желаемый выход:

Я хочу вывод, как на картинке ниже. Как мне этого добиться?

Желаемое выходное изображение

Ответы [ 2 ]

0 голосов
/ 12 января 2019

вы должны представить свой список соответственно
просто определите ваше мнение 

const renderMenuItem = ({item, index}) => {

    return (
            <View style={{...}}>
<Text style={styles.title}>
              {item.name}
<Text>
<Text style={styles.description}>
              {item.description}
<Text>
<Image source: require('./images/uthappizza.png')/>
                </View>
    );
};
0 голосов
/ 12 января 2019

Вы уверены, что проблема с плоским списком? , вы видите список, а это значит, что он работает. Итак ... проблема в компоненте ListItem, согласно this и this , ListItem не имеет свойства hideChevron [в последней версии], попробуйте обновить модуль;) , удаляя hideChevron [который скрывает изображение], или помещая chevron = {true}, потому что вы хотите показать изображение как желаемый вывод

...