Question

我是新来的响应者，正在尝试运行包含反应导航的应用程序。

我已将React Navigation v4添加到我的项目中，并希望在2个屏幕之间切换：

“想法”屏幕
“添加想法”屏幕

使用StackNavigator和createSwitchNavigator

当我尝试运行该应用程序时，我收到错误消息：

“开发服务器返回了响应错误代码：500”

下面是我的代码：

#Navigation.js file

import React from 'react';
import {  createStackNavigator,
createSwitchNavigator, 
StackNavigator } from 'react-navigation';
import LoginForm from './components/login-form';
import IdeaList from './components/idea-list';
import IdeaPadForm from './components/ideapad-form';

const AuthStack = StackNavigator({
Login: {
    screen: LoginForm,
    navigationOptions: {
        headerTitle: 'Login'
    }
}
});


const AppStack = StackNavigator({
Ideas: {
    screen: IdeaList,
    navigationOptions: {
        headerTitle: 'Your Ideas'
    }
},

AddIdeas: {
    screen: IdeaPadForm,
    navigationOptions: {
        headerTitle: 'Add your Ideas'
    }
}
});  


AppNavigator = createSwitchNavigator(
{

    App: AppStack,
    Auth: AuthStack
},
{
    initialRouteName: 'Auth'
}
)

export default AppNavigator;


#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": {
    "@babel/core": "^7.5.5",
    "@react-navigation/core": "^3.5.0",
    "@react-navigation/native": "^3.6.2",
    "expo": "^34.0.1",
    "firebase": "^6.4.0",
    "metro-react-native-babel-transformer": "^0.56.0",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-            
34.0.0.tar.gz",
"react-native-elements": "^1.1.0",
"react-native-gesture-handler": "^1.4.1",
"react-native-screens": "^1.0.0-alpha.23",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.4",
"react-navigation": "^3.0.0",
"react-navigation-stack": "^1.5.1",
"react-redux": "^7.1.0",
"react-timer-mixin": "^0.13.4",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},

“ devDependencies”：{ “ babel-preset-expo”：“ ^ 6.0.0” }， “私人”：true }

App.js
import React from 'react';
import { StyleSheet, View } from 'react-native';
import LoginForm from './src/components/login-form';
import Header from './src/components/header';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducers from './src/reducers';
import ReduxThunk from 'redux-thunk';
import firebase from 'firebase';
import firebaseConfig from './config';
import AppNavigator from './src/navigation';

export default class App extends React.Component {

componentDidMount() {

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
}

 render() {
const store = createStore(reducers,{},applyMiddleware(ReduxThunk));
return (
  <Provider store={store}>
    <AppNavigator />
  </Provider>
 );
 }
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});

我收到的错误消息是：

开发服务器返回响应错误代码：500
尝试从文件中解析模块@react-navigation/core时
C:\Users\IDEAPAD\node_modules\react-navigation\src\react-navigation.js，包C:\Users\IDEAPAD\node_modules\@react- navigation\core\package.json已成功找到。但是这个程序包本身指定了一个main模块字段，该字段无法解析（C:\Users\react\IDEAPAD\node_modules\@react- navigation\core\lib\module\index.js。的确，这些文件都不存在：
- `C：\ Users \ react \ IDEAPAD \ node_modules @ reactnavigation \ core \ lib \ module \ index.js（.native || .android.js | .native.js | .js | .andr
oid.json | .native.json | .json | .android.ts | .native.ts | .ts | .android.tsx | .native.t sx | .tsx）`
- C:\Users\react\IDEAPAD\node_modules\@react-navigation\core\lib\module\index.js\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

无法构建JavaScript包。

开发服务器返回的响应错误代码：500（React-Navigation）

0 个答案: