平面列表实现,但数据未正确呈现
应用.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';