Question

我正在实现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;

错误：

我得到了以下不需要的输出。

result image

所需的输出：

我要输出如下图所示的图像。我该如何实现？

Desired output image

Answer 1

您确定问题出在单位列表上吗？，您会看到一个列表，这意味着它正在工作。因此，问题出在ListItem组件上，根据this和this，ListItem没有[最新版本]的hideChevron属性，请尝试更新模块;），删除hideChevron [来隐藏图像]，或者放置chevron = {true}，因为您希望像期望的输出一样显示图像

Answer 2

您应该相应地呈现您的列表
只需定义您的视图

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

FlatList无法正确渲染

2 个答案: