React-Native Flatlist 由于某些错误而没有 Rendring



平面列表实现,但数据未正确呈现

应用.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 />
    );
  }
}

主组件.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

菜单组件.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

错误

您可能忘记导出已混淆默认和命名导入的组件或组件

我已经阅读了所有相关的队列,但对我不起作用新手到反应原生

帮助将得到高度重视

谢谢

由于菜单组件是默认导出,因此您无法像{Menu}那样导入它,因此

在您的主组件中.js

改变

   import {Menu} from './MenuComponent';

   import Menu from './MenuComponent';

改变

import Main from './components/MainComponents';

import Main from './components/MainComponent';

相关内容

  • 没有找到相关文章