React Native - 当我想导航时出错

Question

当我尝试使用 react.navigation 进行导航时出现错误。

我也有一个视觉错误，因为我添加了反应导航。

这是我的 app.js 代码：

import React, { useState } from "react";
 import {
   StyleSheet,
   Text,
   View,
   Image,
   TextInput,
   Button,
   TouchableOpacity,
 } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './HomeScreen';
import RegisterScreen from './RegisterScreen';
const Stack = createNativeStackNavigator();

 export default function App() {


   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
  const link = "./Ressources/logoressources.png";

  /*async function ClickLogin(){
    alert(email);
    l
  }
  async function ClickRegister(){
    alert(email);
    
  }
  async function ClickMotDePasseOublie(){
    alert("Fallait pas l'oublier (Veuillez l'ecrire sur un papier que vous nous remettrez la prochaine fois)");
    
  }*/
  //<Stack.Navigator>
 /* <Stack.Screen
            name="Home"
            component={HomeScreen}
          />*/
          //</Stack.Navigator>
   return (
    <NavigationContainer>
       <Stack.Navigator 
       screenOptions={{
    headerShown: false
    }}>
        <Stack.Screen
            name="Home"
            component={HomeScreen}
            />
            <Stack.Screen
            name="Register"
            component={RegisterScreen}
        />
        
        </Stack.Navigator>
    <HomeScreen />
     
     </NavigationContainer>
   );
 }
  

这里是 HomePage.js 的代码：

import React, { useState } from "react";
 import RegisterScreen from './RegisterScreen';
 import {
   StyleSheet,
   Text,
   View,
   Image,
   TextInput,
   Button,
   TouchableOpacity,
 } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
//import HomeScreen from './HomeScreen';
const Stack = createNativeStackNavigator();

 const HomeScreen = ({navigation}) => {


   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
  const link = "./Ressources/logoressources.png";

  async function ClickLogin(){
    alert(email);
  }
  async function ClickRegister(){
    navigation.navigate("Register");
    
  }
  async function ClickMotDePasseOublie(){
    alert("Fallait pas l'oublier (Veuillez l'ecrire sur un papier que vous nous remettrez la prochaine fois)");
    
  }
  //<Stack.Navigator>
 /* <Stack.Screen
            name="Home"
            component={HomeScreen}
          />*/
          //</Stack.Navigator>
   return (
    
    
    
     <View style={styles.container}>

       
       <Image style={styles.image} source={require(link)} />
  
      
       <View style={styles.inputView}>
         
         <TextInput
           style={styles.TextInput}
           placeholder="Email"
           placeholderTextColor="#003f5c"
           onChangeText={(email) => setEmail(email)}
         />
       </View>
  
       <View style={styles.inputView}>
         <TextInput
           style={styles.TextInput}
           placeholder="Mot de passe"
           placeholderTextColor="#003f5c"
           secureTextEntry={true}
           onChangeText={(password) => setPassword(password)}
         />
       </View>

       <View style={styles.inputViewConfirm}>
         <TextInput
         
           style={styles.TextInput}
           placeholder="Confirmer mot de passe"
           placeholderTextColor="#003f5c"
           secureTextEntry={true}
           onChangeText={(password) => setPassword(password)}
         />
       </View>

  
       <TouchableOpacity onPress={ClickMotDePasseOublie}>
         <Text style={styles.forgot_button}>Mot de passe oublié ?</Text>
         
       </TouchableOpacity>

       <TouchableOpacity onPress={ClickRegister}>
         <Text style={styles.Register_button}>Pas de compte ? Inscrivez-vous !</Text>
       </TouchableOpacity>


       <TouchableOpacity style={styles.loginBtn} 
       onPress={ClickLogin}>
         <Text style={styles.loginText}>Se connecter</Text>
       </TouchableOpacity>
     </View>
     
   
   );
 }
  
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: "#16a085",
     alignItems: "center",
     justifyContent: "center",
   },
  
   image: {
     marginBottom: 10,
     height: 200,
   },
  
   inputView: {
     backgroundColor: "#A6E4E7",
     borderRadius: 30,
     width: "75%",
     height: 45,
     marginBottom: 20,
  
     alignItems: "center",
   },

   inputViewConfirm: {
    backgroundColor: "#A6E4E7",
    borderRadius: 30,
    width: "75%",
    height: 45,
    marginBottom: 20,
 
    alignItems: "center",
  },
  
   TextInput: {
     height: 50,
     flex: 1,
    
     marginLeft: 10,
   },
  
   forgot_button: {
     height: 30,
     marginBottom: 20,
   },
   Register_button: {
    color: "#4834d4",
    height: 30,
    marginBottom: 10,
  },
  
   loginBtn: {
     width: "80%",
     borderRadius: 25,
     height: 50,
     alignItems: "center",
     justifyContent: "center",
     marginTop: 5,
     backgroundColor: "#88FFDD",
   },
 });

export default HomeScreen;

和 registerScreen 代码：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const RegisterScreen = ({navigation}) =>  {
  
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>
      </View>
    );
  
}

// ...

export default RegisterScreen;

这是我的错误：

现在是应用程序渲染的屏幕截图：

你有我的解决方案吗？

我试图删除顶部导航栏以重新调整界面，但没有任何效果。

我还验证了重定向错误的路线，已经在互联网和文档中搜索了答案，但没有找到。

Answer 1

Promise Unhandled Promise Rejection 通常是函数错误，而不是导航错误。

根据您提供的代码，此错误可能来自您的警报功能。

如果你的函数“alert”真的是一个承诺（我看到你使用了“async”这个词），你应该在函数调用之前使用“await”：

await alert()

另外，请记住在创建函数时使用 try/catch。

通过这种方式，您将能够捕获并控制错误，以更好地了解它的来源。

async function alert() {

try {

    // do some async work
    await doSomething()

} catch (error) {

    // understand error
    console.log(error)

    // handle error
}

}