开发者问题收集

TypeError:未定义不是一个对象(评估“navigation.replace”)

2021-10-05
1024

我的登录页面

import React, { useState } from 'react'
import { TouchableOpacity, StyleSheet, View, ImageBackground } from 'react-native'
import { Text } from 'react-native-paper'
import Logo from '../Component/Logo'
import Header from '../Component/Header'
import Button from '../Component/Button'
import TextInput from '../Component/Inputtext'
import BackButton from '../Component/Backbutton'
import { theme } from '../core/theme'
import { emailValidator } from '../Component/emailval'
import { passwordValidator } from '../Component/Passwordval'

export default function LoginScreen({ navigation }) {
  const [email, setEmail] = useState({ value: '', error: '' })
  const [password, setPassword] = useState({ value: '', error: '' })

  const onLoginPressed = () => {
    const emailError = emailValidator(email.value)
    const passwordError = passwordValidator(password.value)
    if (emailError || passwordError) {
      setEmail({ ...email, error: emailError })
      setPassword({ ...password, error: passwordError })
      return
    }
    navigation.reset({
      index: 0,
      routes: [{ name: 'Dashboard' }],
    })
  }

  return (
    <ImageBackground   style={styles.image} source={require('../imgs/back.png') }>
    <View>
      <BackButton />
      <Logo />
      <Header style={styles.header}>Welcome back.</Header>
      <TextInput
        label="Email"
        returnKeyType="next"
        value={email.value}
        onChangeText={(text) => setEmail({ value: text, error: '' })}
        error={!!email.error}
        errorText={email.error}
        autoCapitalize="none"
        autoCompleteType="email"
        textContentType="emailAddress"
        keyboardType="email-address"
        style={styles.textmail}
      />
      <TextInput
        label="Password"
        returnKeyType="done"
        value={password.value}
        onChangeText={(text) => setPassword({ value: text, error: '' })}
        error={!!password.error}
        errorText={password.error}
        secureTextEntry
        style={styles.textmail}
      />
      <View style={styles.forgotPassword}>
        <TouchableOpacity
          onPress={() => navigation.navigate('ResetPasswordScreen')}
        >
          <Text style={styles.forgot}>Forgot your password?</Text>
        </TouchableOpacity>
      </View>
      <Button mode="contained" onPress={onLoginPressed} style={styles.login}>
        Login
      </Button>
      <View style={styles.row}>
        <Text>Don’t have an account? </Text>
        <TouchableOpacity onPress={() => navigation.replace('login')}>
          <Text style={styles.link}>Sign up</Text>
        </TouchableOpacity>
      </View>
      </View>
    </ImageBackground>
  )
}

const styles = StyleSheet.create({
  forgotPassword: {
    width: '100%',
    alignItems: 'flex-end',
    marginBottom: 24,
  },
  row: {
    flexDirection: 'row',
    marginTop: 4,
  },
  forgot: {
    fontSize: 13,
    color: '#414757',
  },
  link: {
    fontWeight: 'bold',
    color: '#560CCE',
  },
  header: {
    fontSize: 21,
    color: '#560CCE',
    fontWeight: 'bold',
    paddingVertical: 12,
  },
  image: {
    width:'100%',
    height: '100%',
  },
  textmail:{
      backgroundColor:"#ffffff",
      width:"90%",
      alignSelf:'center',
      borderRadius:40,

  },
  login:{
      width:"70%"
  }
})

App js::

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import OnboardingScreen from './Component/Onboardingscreen';
import LoginScreen from './Component/Loginscreen';
import Forgotpass from './Component/Forgotpassword';
import RegisterScreen from './Component/SignupScreen';
import  AsyncStorage  from '@react-native-async-storage/async-storage';
import { useEffect } from 'react';
const AppStack = createStackNavigator();

 const App =() => {
     const [isFirstLaunch, setIsFirstLaunch,] = React.useState(null);

     useEffect(() => {
         AsyncStorage.getItem('alreadyLaunched').then(value => {
             if(value == null) {
                 AsyncStorage.setItem('alreadyLaunched','true');
                 setIsFirstLaunch(true);
             } else {
                 setIsFirstLaunch(false);
             }
         });
     }, []);
     
     if (isFirstLaunch == null) {
         return null;
     } else if ( isFirstLaunch == true ){
        return (
            <NavigationContainer>
                <AppStack.Navigator
                headerMode='none'
                >
                    <AppStack.Screen name="OnboardingScreen" component={OnboardingScreen}/>
                    <AppStack.Screen name='login' component={LoginScreen} />
                    <AppStack.Screen name="RegisterScreen" component={RegisterScreen} />
                    <AppStack.Screen name="ResetPasswordScreen" component={Forgotpass} />
                </AppStack.Navigator>
            </NavigationContainer>
        );
     } else {
    return  <LoginScreen />;
 }
}

export default App;

当我按“忘记密码”和“注册”时发生错误, 所有依赖项都是 addad , 它显示 onpress 错误,我添加了错误屏幕截图,下面还有以下内容, 错误 TypeError:未定义不是对象(评估“navigation.replace”) 错误 TypeError:未定义不是对象(评估“navigation.replace”) 在此处输入图片描述

2个回答

尝试使用 useNavigation() 钩子:

import { useNavigation } from '@react-navigation/native';

export default function LoginScreen() {
  const navigation = useNavigation();

  return (
    ...
    <TouchableOpacity onPress={() => navigation.replace('login')}>
      <Text style={styles.link}>Sign up</Text>
    </TouchableOpacity>
    ...
  );
}
Neeko
2021-10-05

数组中的单个数据在 api 数据中被删除,因此显示

null is a not an object

解决方案 :给出缺失的值 = null;

yogaprasanth
2022-06-02