Question

因此，我在Coursera讲座之后创建了一个简单的本机反应。

“我的菜单”组件仅保存一个食谱列表，并将其显示在设备上。

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}
                onPress={() => props.onPress(item.id)}
                leftAvatar={{ source: require('./images/uthappizza.png')}}
            />
        );
    }

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

export default Menu;

接下来，有一个DishdetailComponent呈现每个菜的细节。

import React from 'react';
import { Text, View } from 'react-native';
import { Card } from 'react-native-elements';

function RenderDish(props) {

    const dish = props.dish;

        if (dish != null) {
            return(
                <Card
                featuredTitle={dish.name}
                image={require('./images/uthappizza.png')}>
                    <Text style={{margin: 10}}>
                        {dish.description}
                    </Text>
                </Card>
            );
        }
        else {
            return(<View></View>);
        }
}

function Dishdetail(props) {
    return(<RenderDish dish={props.dish} />);
}

export default Dishdetail;

最后，我有MainComponent，它像是持有前两个组件的顶部组件。

import { View } from 'react-native';
import { DISHES } from '../shared/dishes';
import Dishdetail from './DishdetailComponent';

class Main extends Component {

    constructor(props){
        super(props);

        this.state = {
            dishes: DISHES,
            selectedDish: null
        };
    }

    onDishSelect(dishId) {
        this.setState({selectedDish: dishId})
    }

    render(){
        return(
            <View style={{flex:1}}>
                <Menu dishes={this.state.dishes} onPress={(dishId) => this.onDishSelect(dishId)} />
                <Dishdetail dish={this.state.dishes.filter((dish) => dish.id === this.state.selectedDish)[0]} />
            </View>
        );
    }

}

export default Main;

当我运行该应用程序时，我会得到这个

我错过了什么吗？如果您想近距离看，这是我的repo。

Answer 1

这里的片刻：

1）似乎您忘记了在导入顶部导入Menu组件

2）您刚导入DishdetailComponent时就有错字

只需粘贴这些行而不是您的行

import { View } from "react-native";
import { DISHES } from "../shared/dishes";
import Dishdetail from "./DishDetailComponent";
import Menu from "./MenuComponent";

此外，有时bunder崩溃并且不重新加载。为了解决这个问题，我建议使用 yarn start --reset-cache命令（但不要忘记杀死以前的Metro Bundler实例）：）

标识符已经被声明为本机反应

1 个答案: