React Native Alert 自动隐藏和消失

Question

我在 React Native 中遇到 Alert 的问题。

我正在使用警报向用户显示消息。在 android 中，Alert 工作正常，但在 iOS 中，Alert 会自动弹出并自动消失。

代码：

export const loginUser = (values) => {
  return (dispatch) => {
    console.log("REDUX THUNK STARTED !");
    console.log("GET DATA FROM : ", Helpers.USER_LOGIN);
    dispatch(onLoginRequest(true));

    fetch(Helpers.USER_LOGIN, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: values.userEmail,
        password: values.userPassword,
      }),
    })
      .then((res) => {
        dispatch(onLoginRequest(false));

        console.log("Response Status from the URL - ", res.status);
        console.log("REDUX THUNK COMPLETE !");

        //Handle the response accordingly
        if (res.status == "200") {
          values.navigation.navigate("HomeScreen");
          dispatch(onLoginSuccess(true));
        } else if (res.status == "400") {
          //Invalid credentails
          Alert.alert(
            "Error",
            "Please Check Email and Password",
            [{ text: "OK", onPress: () => dispatch(onLoginSuccess(false)) }],
            { cancelable: false }
          );
        } else {
          errorDialog.globalError();
        }
      })
      .catch((e) => {
        console.warn("URL Fetch Error - ", e);
        dispatch(onLoginRequest(false));
        dispatch(onLoginFailure(true));
        console.log("REDUX THUNK ERROR !");
        errorDialog.globalError();
      });
  };
};

Answer 1

您需要添加 async await 或 promise

else if (res.status == "400") {
showAlert();
}

function showAlert(){
  return new Promise((resolve, reject) => {
    Alert.alert(
     "Error",
     "Please Check Email and Password",
      [
        {text: 'Ok', onPress: () => {resolve('ok') },
      ],
      {cancelable: false},
    );
  });
}

Answer 2

我找到了解决方案。问题出在我的加载微调器覆盖 library

会自动关闭Alert

作为解决方案，我为警报添加了 setTimeout 函数

代码

setTimeout(() => {
            Alert.alert(
              'Error',
              'Please Check Email and Password',
              [{text: 'OK', onPress: () => dispatch(onLoginSuccess(false))}],
              {cancelable: false},
            );
          }, 100);

React Native Alert 自动隐藏和消失

React Native Alert auto hide and dissapear

javascript

alert

android

ios

react-native