尝试运行我的应用程序时收到以下警告：可能的未处理的承诺拒绝（id：1）

Question

我目前正在开发一个应用程序，我收到此警告，并想知道我可以做些什么来解决承诺拒绝问题。屏幕安装后就会出现此警告。

错误截图：

app.js 代码：

import React, { useState } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { View, Text, TouchableOpacity, Alert } from "react-native";

import Main from "./Screens/Main";
import Login from "./Screens/Login";
import Settings from "./Screens/Settings";
import EditPatient from "./Screens/EditPatient";
import Add from "./Screens/Add";
import * as firebase from "firebase/auth";
import { Input } from "react-native-elements";
import theme from "./Props/theme";
import './Config/Firebase'
import * as Font from "expo-font";
import ViewSelectedTeeth from "./Screens/ViewSelectedTeeth";
import Pending from "./Screens/Pending";
import Completed from "./Screens/Completed";
import AllCases from "./Screens/AllCases";
import { LogBox } from "react-native";

const Stack = createStackNavigator();

export default class App extends React.Component {
  async componentDidMount() {
    await Font.loadAsync({
      ubuntuMedium: require("./Assets/Fonts/Ubuntu-Medium.ttf"),
      ubuntuBold: require("./Assets/Fonts/Ubuntu-Bold.ttf"),
      ubuntuItalic: require("./Assets/Fonts/Ubuntu-Italic.ttf"),
      ubuntuLight: require("./Assets/Fonts/Ubuntu-Light.ttf"),
      ubuntuRegular: require("./Assets/Fonts/Ubuntu-Regular.ttf"),
      dosisMedium: require("./Assets/Fonts/Dosis-Medium.ttf"),
      dosisBold: require("./Assets/Fonts/Dosis-Bold.ttf"),
      dosisSemibold: require("./Assets/Fonts/Dosis-SemiBold.ttf"),
      dosisLight: require("./Assets/Fonts/Dosis-Light.ttf"),
      dosisRegular: require("./Assets/Fonts/Dosis-Regular.ttf"),
      comfortaaMedium: require("./Assets/Fonts/Comfortaa-Medium.ttf"),
      comfortaaBold: require("./Assets/Fonts/Comfortaa-Bold.ttf"),
      comfortaaSemibold: require("./Assets/Fonts/Comfortaa-SemiBold.ttf"),
      comfortaaLight: require("./Assets/Fonts/Comfortaa-Light.ttf"),
      comfortaaRegular: require("./Assets/Fonts/Comfortaa-Regular.ttf"),
    });
    LogBox.ignoreLogs(["Setting a timer for a long period of time"]);
  }

  state = {
    currentPassword: "",
    newPassword: "",
    isFirstLaunch: null,
  };

  resetPassword = ({ navigation }) => {
    const [currentPassword, setCurrentPassword] = useState("");
    const [newPassword, setNewPassword] = useState("");
    const reauthenticate = (currentPassword) => {
      var user = firebase().currentUser;
      var cred = firebase.EmailAuthProvider.credential(
        user.email,
        currentPassword
      );
      return user.reauthenticateWithCredential(cred);
    };
    const onChangePassword = async () => {
      await reauthenticate(currentPassword)
        .then(() => {
          var user = firebase().currentUser;
          user
            .updatePassword(newPassword)
            .then(() => {
              Alert.alert("Password has been changed");
              setCurrentPassword("");
              setNewPassword("");
              navigation.navigate("Settings");
            })
            .catch((error) => {
              Alert.alert(error.message);
            });
        })
        .catch((error) => {
          Alert.alert(error.message);
        });
    };

    return (
      <View style={{ flex: 1, justifyContent: "center", marginHorizontal: 25 }}>
        <Input
          placeholder="Current Password"
          value={currentPassword}
          onChangeText={(currentPassword) =>
            setCurrentPassword(currentPassword)
          }
          secureTextEntry
        />
        <Input
          placeholder="New Password"
          value={newPassword}
          onChangeText={(newPassword) => setNewPassword(newPassword)}
          secureTextEntry
        />

        <TouchableOpacity
          onPress={() => onChangePassword()}
          style={{
            paddingVertical: 20,
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: theme.darkBlue,
            borderRadius: 40,
          }}
        >
          <Text
            style={{ fontSize: 20, color: "white", fontFamily: "ubuntuBold" }}
          >
            Change Password
          </Text>
        </TouchableOpacity>
      </View>
    );
  };

  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            gestureEnabled: true,
            gestureDirection: "horizontal",
            headerBackTitle: "Back",
            headerBackTitleStyle: { color: "black" },
            headerTintColor: "black",
            headerMode:"screen"
          }}
          
        >
          <Stack.Screen
            name="Login"
            component={Login}
            options={{ headerShown: false }}
          />
          <Stack.Screen
            name="Home"
            component={Main}
            options={{ headerShown: false }}
          />
          <Stack.Screen
            name="Settings"
            component={Settings}
            options={{ headerShown: true }}
          />
          <Stack.Screen
            name="Edit"
            component={EditPatient}
            options={{ headerShown: false }}
          />
          <Stack.Screen
            name="Add"
            component={Add}
            options={{ headerShown: true }}
          />

          <Stack.Screen
            name="Reset Password"
            component={this.resetPassword}
            options={{ headerShown: true }}
          />

          <Stack.Screen
            name="View Selected Teeth"
            component={ViewSelectedTeeth}
            options={{ headerShown: false }}
          />

          <Stack.Screen
            name="Remaining Cases"
            component={Pending}
            options={{ headerShown: true }}
          />

          <Stack.Screen
            name="Completed Cases"
            component={Completed}
            options={{ headerShown: true }}
          />

          <Stack.Screen
            name="All Cases"
            component={AllCases}
            options={{ headerShown: true }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

login.js 的代码（因为它是我堆栈上的第一个屏幕......我认为该代码中可能存在问题）：

import React from "react";
import {
  View,
  Text,
  TextInput,
  ActivityIndicator,
  Modal,
  ScrollView,
  TouchableOpacity,
  StyleSheet,
  Image,
  KeyboardAvoidingView,
  Alert,
  StatusBar,
  Platform,
} from "react-native";
import { CheckBox, Input } from "react-native-elements";
import {signInWithEmailAndPassword, createUserWithEmailAndPassword} from "firebase/auth";
import * as db from 'firebase/firestore'
import Constants from "expo-constants";

export default class Login extends React.Component {
  state = {
    email: "",
    password: "",
    showPassword: false,
    userLoggedIn: false,
    modalEmail: "",
    modalPassword: "",
    username: "",
    clinicName: "",
    age: "",
    isModalVisible: false,
    confirmPassword: "",
  };

  showModal = () => {
    return (
      <Modal
        visible={this.state.isModalVisible}
        transparent={false}
        animationType="fade"
      >
        <Text style={styles.signUpText}>Sign up to get started</Text>

        <ScrollView style={{ marginTop: 20 }}>
          <TextInput
            style={styles.formTextInput}
            placeholder={"Userame"}
            value={this.state.username}
            maxLength={40}
            placeholderTextColor="gray"
            onChangeText={(text) => {
              this.setState({
                username: text,
              });
            }}
          />

          <TextInput
            style={styles.formTextInput}
            placeholderTextColor="gray"
            placeholder={"Email ID"}
            value={this.state.modalEmail}
            onChangeText={(text) => {
              this.setState({
                modalEmail: text,
              });
            }}
            keyboardType="email-address"
            autoCapitalize="none"
          />
          <TextInput
            style={styles.formTextInput}
            placeholderTextColor="gray"
            placeholder="Clinic name"
            maxLength={40}
            value={this.state.clinicName}
            onChangeText={(text) => {
              this.setState({
                clinicName: text,
              });
            }}
          />
          <TextInput
            style={styles.formTextInput}
            placeholderTextColor="gray"
            placeholder="Age"
            maxLength={2}
            value={this.state.age}
            onChangeText={(text) => {
              this.setState({
                age: text,
              });
            }}
          />
          <TextInput
            style={styles.formTextInput}
            placeholderTextColor="gray"
            placeholder="Phone number"
            maxLength={10}
            value={this.state.phoneNumber}
            onChangeText={(text) => {
              this.setState({
                phoneNumber: text,
              });
            }}
            keyboardType="numeric"
          />

          <TextInput
            style={styles.formTextInput}
            placeholderTextColor="gray"
            placeholder={"Password"}
            secureTextEntry={true}
            value={this.state.modalPassword}
            onChangeText={(text) => {
              this.setState({
                modalPassword: text,
              });
            }}
          />

          <TextInput
            style={styles.formTextInput}
            placeholderTextColor="gray"
            placeholder={"Confirm Password"}
            secureTextEntry={true}
            value={this.state.confirmPassword}
            onChangeText={(text) => {
              this.setState({
                confirmPassword: text,
              });
            }}
          />

          <TouchableOpacity
            style={styles.registerButton}
            onPress={() => {
              if (
                this.state.modalEmail === "" ||
                this.state.username === "" ||
                this.state.clinicName === "" ||
                this.state.age === "" ||
                this.state.phoneNumber === "" ||
                this.state.modalPassword === "" ||
                this.state.confirmPassword === ""
              ) {
                Alert.alert(
                  "Couldn't sign up",
                  "Please enter all information to sign up"
                );
              } else if (
                this.state.modalPassword !== this.state.confirmPassword
              ) {
                Alert.alert(
                  "Couldn't sign up",
                  "Please make sure the password and confirm password match"
                );
              } else {
                this.onSignUp(this.state.modalEmail, this.state.modalPassword);
              }
            }}
          >
            <Text> Register </Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.cancelButton}
            onPress={() => this.setState({ isModalVisible: false })}
          >
            <Text>Cancel</Text>
          </TouchableOpacity>
        </ScrollView>
      </Modal>
    );
  };

  onSignIn = async (email, password) => {
    this.setState({ userLoggedIn: true });
    signInWithEmailAndPassword(email, password)
      .then((response) => {
        this.props.navigation.replace("Home");
      })
      .catch((error) => {
        Alert.alert("Couldn't sign in", error.message);
      });
    this.setState({ userLoggedIn: false });
  };

  onSignUp = async (email, password) => {
    createUserWithEmailAndPassword(
        this.state.modalEmail,
        this.state.modalPassword
      )
      .then(() => {
        db.addDoc("Users",{
            username: this.state.username,
            email_id: this.state.modalEmail,
            clinicName: this.state.clinicName,
            age: this.state.age,
            phoneNumber: this.state.phoneNumber,
            tablets: []
        })
        this.setState({ isModalVisible: false });
        this.props.navigation.replace("Home");
      })
      .catch((error) => {
        Alert.alert("Coudn't create user", error.message);
        console.warn(error)
      });
  };

  render() {
    return (
      <KeyboardAvoidingView style={{ flex: 1, backgroundColor: "#dfff" }}>
        {this.showModal()}
        <StatusBar hidden />
        <Image
          source={require("../Assets/Images/dentist.png")}
          style={{
            width: 150,
            height: 150,
            alignSelf: "center",
            marginTop: 45,
          }}
        />

        <View style={{ marginTop: 20, marginHorizontal: 20 }}>
          <Text style={{ textTransform: "uppercase", color: "#646464" }}>
            email id
          </Text>
          <Input
            style={{
              marginHorizontal: 10,
              paddingTop: 10,
              paddingHorizontal: 10,
              marginBottom: 10,
              marginVertical: 5,
              color: "#646464",
              paddingBottom: 4,
            }}
            value={this.state.email}
            keyboardType="email-address"
            autoCompleteType="email"
            autoCapitalize="none"
            onChangeText={(email) => this.setState({ email: email })}
          />
          <Text style={{ textTransform: "uppercase", color: "#646464" }}>
            password
          </Text>
          <Input
            style={{
              marginHorizontal: 10,
              paddingTop: 10,
              paddingHorizontal: 10,
              marginBottom: 10,
              marginVertical: 5,
              color: "#646464",
              paddingBottom: 4,
            }}
            value={this.state.password}
            keyboardType="visible-password"
            onChangeText={(password) => this.setState({ password: password })}
            secureTextEntry={this.state.showPassword ? false : true}
          />
          {Platform.OS === "ios" ? (
            <CheckBox
              checkedColor="#0F0"
              onPress={() =>
                this.setState({
                  showPassword: !this.state.showPassword,
                })
              }
              size={20}
              title="Show password"
              uncheckedColor="#F00"
              checked={this.state.showPassword}
              checkedIcon="check"
              uncheckedIcon="close"
            />
          ) : null}
          <TouchableOpacity
            style={{
              alignItems: "center",
              padding: 15,
              backgroundColor: "#FFCBF6",
              marginVertical: 15,
              borderRadius: 30,
            }}
            onPress={() => this.onSignIn(this.state.email, this.state.password)}
          >
            {this.state.userLoggedIn === false ? (
              <Text
                style={{
                  fontSize: 20,
                  color: "#494949",
                  fontWeight: "bold",
                  textTransform: "uppercase",
                }}
              >
                Sign in
              </Text>
            ) : (
              <ActivityIndicator size={"large"} />
            )}
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              alignItems: "center",
              padding: 15,
              backgroundColor: "#D1CCFF",
              marginBottom: 15,
              borderRadius: 30,
            }}
            onPress={() => this.setState({ isModalVisible: true })}
          >
            <Text
              style={{
                fontSize: 20,
                color: "#494949",
                fontWeight: "bold",
                textTransform: "uppercase",
              }}
            >
              Sign up
            </Text>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  formTextInput: {
    width: "75%",
    height: 35,
    alignSelf: "center",
    borderColor: "#8022d9",
    borderRadius: 10,
    borderWidth: 1,
    marginTop: 20,
    padding: 10,
  },
  cancelButton: {
    width: 200,
    height: 30,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 5,
    alignSelf: "center",
  },
  registerButton: {
    width: 200,
    height: 40,
    alignItems: "center",
    justifyContent: "center",
    borderWidth: 1,
    borderRadius: 10,
    marginTop: 30,
    alignSelf: "center",
  },
  signUpText: {
    alignSelf: "center",
    marginTop: 50,
    fontSize: 30,
    fontWeight: "bold",
  },
  linearGradient: {
    flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5,
  },
  buttonText: {
    fontSize: 18,
    textAlign: "center",
    margin: 10,
    color: "#ffffff",
    backgroundColor: "transparent",
  },
});

如果您对如何解决此问题有任何想法，请告诉我。提前致谢！

Answer 1

我没有看到任何地方检查字体是否已加载！

检查您看到的更改//ADD THIS HERE !!!：

来自文档

应用程序.js

import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, TouchableOpacity, Alert } from 'react-native';

import Main from './Screens/Main';
import Login from './Screens/Login';
import Settings from './Screens/Settings';
import EditPatient from './Screens/EditPatient';
import Add from './Screens/Add';
import * as firebase from 'firebase/auth';
import { Input } from 'react-native-elements';
import theme from './Props/theme';
import './Config/Firebase';
import * as Font from 'expo-font';
import ViewSelectedTeeth from './Screens/ViewSelectedTeeth';
import Pending from './Screens/Pending';
import Completed from './Screens/Completed';
import AllCases from './Screens/AllCases';
import { LogBox } from 'react-native';

const Stack = createStackNavigator();

export default class App extends React.Component {
  async componentDidMount() {
    await Font.loadAsync({
      ubuntuMedium: require('./Assets/Fonts/Ubuntu-Medium.ttf'),
      ubuntuBold: require('./Assets/Fonts/Ubuntu-Bold.ttf'),
      ubuntuItalic: require('./Assets/Fonts/Ubuntu-Italic.ttf'),
      ubuntuLight: require('./Assets/Fonts/Ubuntu-Light.ttf'),
      ubuntuRegular: require('./Assets/Fonts/Ubuntu-Regular.ttf'),
      dosisMedium: require('./Assets/Fonts/Dosis-Medium.ttf'),
      dosisBold: require('./Assets/Fonts/Dosis-Bold.ttf'),
      dosisSemibold: require('./Assets/Fonts/Dosis-SemiBold.ttf'),
      dosisLight: require('./Assets/Fonts/Dosis-Light.ttf'),
      dosisRegular: require('./Assets/Fonts/Dosis-Regular.ttf'),
      comfortaaMedium: require('./Assets/Fonts/Comfortaa-Medium.ttf'),
      comfortaaBold: require('./Assets/Fonts/Comfortaa-Bold.ttf'),
      comfortaaSemibold: require('./Assets/Fonts/Comfortaa-SemiBold.ttf'),
      comfortaaLight: require('./Assets/Fonts/Comfortaa-Light.ttf'),
      comfortaaRegular: require('./Assets/Fonts/Comfortaa-Regular.ttf'),
    });
    LogBox.ignoreLogs(['Setting a timer for a long period of time']);
    this.setState({ fontsLoaded: true }); // ADD THIS HERE !!!
  }

  state = {
    currentPassword: '',
    newPassword: '',
    isFirstLaunch: null,
    fontsLoaded: false, // THIS HERE !!!
  };

  resetPassword = ({ navigation }) => {
    const [currentPassword, setCurrentPassword] = useState('');
    const [newPassword, setNewPassword] = useState('');
    const reauthenticate = (currentPassword) => {
      var user = firebase().currentUser;
      var cred = firebase.EmailAuthProvider.credential(
        user.email,
        currentPassword,
      );
      return user.reauthenticateWithCredential(cred);
    };
    const onChangePassword = async () => {
      await reauthenticate(currentPassword)
        .then(() => {
          var user = firebase().currentUser;
          user
            .updatePassword(newPassword)
            .then(() => {
              Alert.alert('Password has been changed');
              setCurrentPassword('');
              setNewPassword('');
              navigation.navigate('Settings');
            })
            .catch((error) => {
              Alert.alert(error.message);
            });
        })
        .catch((error) => {
          Alert.alert(error.message);
        });
    };

    return (
      <View style={{ flex: 1, justifyContent: 'center', marginHorizontal: 25 }}>
        <Input
          placeholder="Current Password"
          value={currentPassword}
          onChangeText={(currentPassword) =>
            setCurrentPassword(currentPassword)
          }
          secureTextEntry
        />
        <Input
          placeholder="New Password"
          value={newPassword}
          onChangeText={(newPassword) => setNewPassword(newPassword)}
          secureTextEntry
        />

        <TouchableOpacity
          onPress={() => onChangePassword()}
          style={{
            paddingVertical: 20,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: theme.darkBlue,
            borderRadius: 40,
          }}
        >
          <Text
            style={{ fontSize: 20, color: 'white', fontFamily: 'ubuntuBold' }}
          >
            Change Password
          </Text>
        </TouchableOpacity>
      </View>
    );
  };

  render() {
    // THIS HERE !!!
    // Use the font with the fontFamily property after loading
    if (this.state.fontsLoaded) {
      return (
        <NavigationContainer>
          <Stack.Navigator
            screenOptions={{
              gestureEnabled: true,
              gestureDirection: 'horizontal',
              headerBackTitle: 'Back',
              headerBackTitleStyle: { color: 'black' },
              headerTintColor: 'black',
              headerMode: 'screen',
            }}
          >
            <Stack.Screen
              name="Login"
              component={Login}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Home"
              component={Main}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Settings"
              component={Settings}
              options={{ headerShown: true }}
            />
            <Stack.Screen
              name="Edit"
              component={EditPatient}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Add"
              component={Add}
              options={{ headerShown: true }}
            />

            <Stack.Screen
              name="Reset Password"
              component={this.resetPassword}
              options={{ headerShown: true }}
            />

            <Stack.Screen
              name="View Selected Teeth"
              component={ViewSelectedTeeth}
              options={{ headerShown: false }}
            />

            <Stack.Screen
              name="Remaining Cases"
              component={Pending}
              options={{ headerShown: true }}
            />

            <Stack.Screen
              name="Completed Cases"
              component={Completed}
              options={{ headerShown: true }}
            />

            <Stack.Screen
              name="All Cases"
              component={AllCases}
              options={{ headerShown: true }}
            />
          </Stack.Navigator>
        </NavigationContainer>
      );
      // THIS HERE !!!
    } else {
      return null;
    }
  }
}