Question

我是Coursera的新成员，但讲师的笔记似乎很老，我正在尝试对讲师要实现的目标采用一些代码。该应用程序显示一些餐具，用户可以选择餐具，然后将它们带到DishdetailComponent.js。的入口点是MainComponent.js，它显示指向MenuCompeonent.js的位置，我的问题是如何添加AppContainer，因为此刻我收到一条错误消息，内容是： 永久违反：此导航器缺少导航道具。在react-navigation v3和v4中，您必须设置应用程序conatiner。。以下是我的代码文件，以获得一些指导；

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';
import Dishdetail from './DishdetailComponent';
import { View, Platform } from 'react-native' ;
import {createStackNavigator } from 'react-navigation-stack';
import {createAppContainer } from 'react-navigation';
//import AppContainer from './ScreenavComponent';

//import { Platform } from '@unimodules/core';

const MenuNavigator = createStackNavigator({
     Menu: { screen: Menu },
     Dishdetail: { screen: Dishdetail }
}, {
    initialRoutName: 'Menu',
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#512DA8'
        },
        headerTiniColor: '#fff',
        headerTitleStyle: {
            color: '#fff'
        }
    }

})

//const AppContainer = createAppContainer(MenuNavigator) ;

class Main extends Component {
    
    render() {
        return(
           <View style={{flex: 1, paddingTop: Platform.OS == 'ios' ? 0: Expo.Constants.statusBarHeight}}>
               <MenuNavigator />  
        </View>
        )
    }
}

export default Main;

MenuComponent.js

import React,{ Component } from 'react';
import { FlatList } from 'react-native';
import { ListItem } from 'react-native-elements'; 
import { DISHES } from '../shared/dishes';

//function Menu(props)
class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dishes: DISHES
            //selectedDish: null
        }
     }

     //display the status bar the title
     static navigationOptions = {
         title: 'Menu'
     }

     
    render() {
        const renderMenuItem = ({item, index}) => {
            return(
                <ListItem 
                   key={index}
                   title={item.name}
                   subtitle={item.description}
                   hideChevron={true}
                   onPress={() => navigate('Dishdetail', {dishId: item.id})}
                   leftAvatar={{source: require('./images/uthappizza.png')}}
                />
    
            )
        }

        //const { navigate } = this.props.navigation;

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

export default Menu;

并且仅在下面提供指导的是我的package.json设置

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.5",
    "expo": "~36.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-elements": "^2.0.4",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-navigation": "^4.1.0",
    "react-navigation-stack": "^2.8.2"
  },
  "devDependencies": {
    "babel-preset-expo": "~8.0.0",
    "@babel/core": "^7.0.0"
  },
  "private": true
}

如何设置AppContainer进行导航

0 个答案: