设置默认路线时出现导航问题

Question

我正在尝试添加一个在添加时有问题的导航

{
  initialRouteName: 'Loading',
 }

当我使用没有initialRouteName的stacknavigator时，一切正常。我正在进行ios仿真（react-native run-ios），并且已经尝试过几次Pod安装。

这是app.js

import React from 'react';
import Loading from './Loading';
import SignUp from './SignUp';
import Login from './Login';
import Main from './Main';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';


const AppNavigator = createStackNavigator(
 { 
   Home: Loading,
   Home: SignUp,
   Home: Login,
   Home: Main,
 },
 {
  initialRouteName: 'Loading',
 }
);

export default createAppContainer(AppNavigator);

这是错误：

TypeError: undefined is not an object (evaluating 'routeConfigs[initialRouteName].params')

This error is located at:
    in NavigationContainer (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

getInitialState
    StackRouter.js:1:2241
getStateForAction
    StackRouter.js:1:4880
NavigationContainer
    index.bundle?platform=ios&dev=true&minify=false:99867:102
renderRoot
    [native code]:0
runRootCallback
    [native code]:0
unstable_runWithPriority
    scheduler.development.js:643:23
failedRoots.forEach$argument_0
    react-refresh-runtime.development.js:201:29
forEach
    [native code]:0
failedRoots.forEach$argument_0
    react-refresh-runtime.development.js:193:24
Refresh.performReactRefresh
    setUpReactRefresh.js:43:6
setTimeout$argument_0
    require.js:609:10
_callTimer
    JSTimers.js:146:14
callTimers
    JSTimers.js:399:17
callFunctionReturnFlushedQueue
    [native code]:0

这是我的package.json

{
  "name": "kowop",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.6",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.5.3",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.6.4",
    "react-native-screens": "^2.0.0-alpha.32",
    "react-navigation": "^4.1.0",
    "react-navigation-stack": "^2.0.16"
  },
  "devDependencies": {
    "@babel/core": "7.8.3",
    "@babel/runtime": "7.8.3",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.4",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

有人知道可能是什么问题吗？

非常感谢！

Tim

Answer 1

据我所知，initialroutename使用的是索引名称，而不是屏幕名称。在您的项目中，您必须使用“主页”。

因此您必须在屏幕之间使用不同的名称。喜欢，

const AppNavigator = createStackNavigator(
 { 
   loading: Loading,
   signUp: SignUp,
   login: Login,
   main: Main,
 },
 {
  initialRouteName: 'loading',
 }
);

此外，我认为在四个屏幕上使用名称'Home'是个坏主意。您必须尝试在屏幕之间使用其他名称。

Answer 2

更改此：

 {
  initialRouteName: 'Loading',
 }

收件人：

 {
  initialRouteName: 'Home',
 }

屏幕键应作为参数传递给initialRouteName

Answer 3

谢谢，我确实不是在指屏幕。

Answer 4

const AppNavigator = createStackNavigator(
  {
    Loading: {
      screen: Loading
    },
    SignUp: {
      screen: SignUp
    },
    Login: {
      screen: Login
    },
    Main: {
      screen: Main
    },
  },
  {
    initialRouteName: 'Loading',
  }
);