由于某些错误，React-Native Flatlist 未呈现

Question

Flatlist 实施但数据未正确呈现

App.js

import React, {Component} from 'react';
import Main from './components/MainComponents';
import {Platform} from 'react-native';



const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});


export default class App extends Component<Props> {
  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,{Component} 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/images/buffet.png')}}
            />
        )
    }

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

export default Menu

错误

您可能忘记了导出组件，或者您混淆了默认导入和命名导入

我已经阅读了所有相关的问题，但对我没有用 react-native 新手

非常感谢您的帮助

谢谢

Answer 1

由于 Menu 组件是默认导出的，您不能像 {Menu} 那样导入它，所以

在你的MainComponent.js

改变

   import {Menu} from './MenuComponent';

到

   import Menu from './MenuComponent';

还有

改变

import Main from './components/MainComponents';

到

import Main from './components/MainComponent';

由于某些错误，React-Native Flatlist 未呈现

React-Native Flatlist is not Rendring due to some error

javascript

reactjs

react-native

listitem

react-native-flatlist