React Native TypeError: undefined is not an object (evaluating 'options.routeGetIdList[action.payload.name]')

Question

我在导航到新屏幕时遇到以下错误。以下是错误的屏幕截图。我正在使用 React Native 样板代码 https://github.com/thecodingmachine/react-native-boilerplate

以下是相关的js文件。

Main.js（导航器）

import React from 'react'
import LoginContainer from '../Containers/Login/login'
import SignUpContainer from '../Containers/Login/signup'
import OTPValidationContainer from '../Containers/Login/enterotp'
import { enableScreens } from 'react-native-screens';
import { createNativeStackNavigator } from 'react-native-screens/native-stack';

enableScreens();
const Stack = createNativeStackNavigator();

// @refresh reset
const MainNavigator = () => {
  return (
    <Stack.Navigator headerMode={'none'}>
      <Stack.Screen name="Login" component={LoginContainer} options={{ headerShown: false }} />
      <Stack.Screen name="SignUp" component={SignUpContainer} />
      <Stack.Screen name="EmailOTP" component={OTPValidationContainer} />
      {/* <Stack.Screen name="Login" component={LoginContainer} options={{
                  title: "Login",
                  headerShown: false,
                }}/>
      <Stack.Screen name="SignUp" component={SignUpContainer} options={{
        title: "SignUp",
        headerShown: false,
      }} />
      <Stack.Screen name="EmailOTP" component={OTPValidationContainer} options={{
        title: "EmailOTP",
        headerShown: false,
      }} /> */}
    </Stack.Navigator>

  )
}

export default MainNavigator

Login.js（屏幕 1）

import React from 'react'
import { useDispatch } from 'react-redux'
import { View, Text, StyleSheet, Image, TextInput } from 'react-native'
import { useTheme } from '@/Theme'
import { useTranslation } from 'react-i18next'
import LinearGradient from 'react-native-linear-gradient'

import {
  GoogleSignin,
  GoogleSigninButton,
  statusCodes,
} from '@react-native-community/google-signin';

const LoginContainer = ({ navigation }) => {
  const { t } = useTranslation()
  const { Images, Layout } = useTheme()
  const dispatch = useDispatch()

  const styles = StyleSheet.create({
    imgBackground: {
      width: '100%',
      height: '100%',
      flex: 1,
    },
    titleText: {
      fontSize: 26,
      fontWeight: "bold",
      color: "#7f909f"
    },
    linearGradient: {
      margin: 16,
      borderRadius: 5,
      height: 42
    },
    buttonText: {
      fontSize: 18,
      fontFamily: 'Gill Sans',
      textAlign: 'center',
      margin: 10,
      color: '#ffffff',
      backgroundColor: 'transparent',
    },
    container: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    label: {
      fontSize: 16,
      fontWeight: 'normal',
      marginBottom: 48,
    }
  })

  const _signIn = async () => {
    try {
      await GoogleSignin.hasPlayServices();
      const userInfo = await GoogleSignin.signIn();
      this.setState({ userInfo });
      console.log("success")
    } catch (error) {
      if (error.code === statusCodes.SIGN_IN_CANCELLED) {
        // user cancelled the login flow
        console.log("error")
      } else if (error.code === statusCodes.IN_PROGRESS) {
        // operation (e.g. sign in) is in progress already
        console.log("error")
      } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
        // play services not available or outdated
        console.log("error")
      } else {
        // some other error happened
        console.log("error")
      }
    }
  }

  return (
    <View style={[Layout.fill, Layout.column]}>
      <Image
        source={Images.logoColor}
        style={{ width: 200, height: 136, marginTop: 36, alignSelf: 'center' }}
      />
      <Text style={[styles.titleText, { marginTop: 16, marginStart: 16 }]}>Welcome Back</Text>
      <Text style={{ fontSize: 13, color: "#7f909f", marginStart: 16, marginTop: 16 }}>Email Address/Phone Number</Text>
      <TextInput
        style={{ height: 40, borderColor: '#b7b7b7', borderWidth: 1, marginStart: 16, marginTop: 8, marginEnd: 16 }}
      />

      <Text style={{ fontSize: 13, color: "#7f909f", marginStart: 16, marginTop: 8 }}>Password</Text>
      <TextInput
        textContentType={'password'}
        multiline={false}
        secureTextEntry={true}
        style={{ height: 40, borderColor: '#b7b7b7', borderWidth: 1, marginStart: 16, marginTop: 8, marginEnd: 16 }}
      />
      <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} colors={['#fec6a5', '#fb7aa5']} style={styles.linearGradient}>
        <Text style={styles.buttonText}>
          Sign in
        </Text>
      </LinearGradient>

      <Text style={{ fontSize: 14, color: "#7f909f", marginStart: 16, marginEnd: 16, marginTop: 8, alignSelf: 'center' }}>OR</Text>

      <GoogleSigninButton
        style={{ height: 48, marginStart: 16, marginTop: 8, marginEnd: 16, alignSelf: 'center' }}
        size={GoogleSigninButton.Size.Wide}
        color={GoogleSigninButton.Color.Light}
        onPress={() => this._signIn}
      />

    <Text style={{ fontSize: 14, color: "#7f909f", marginStart: 16, marginEnd: 16, marginTop: 8, alignSelf: 'center' }}>
    Don't have an account?
    <Text onPress={() => navigation.navigate('SignUp')} style={{color: "#fb7aa5"}}>
        Sign Up
    </Text>
    </Text>
    </View>
  )
}

export default LoginContainer

另请注意，我已尝试清除和重置缓存并删除 android 中的构建文件夹。这使导航有效，但只能进行一次。