Alert.alert 在 React native iOS 中不起作用，但在 Android 中完全正常

Question

请检查代码，

import { 
  Alert,
} from 'react-native';

 checkForSendingOtp = () => {
    let hash = 'aBcDeGgd';
    Platform.OS === 'android'
     ? RNOtpVerify.getHash()
        .then(text => {
          hash = text + ''.replace('[', '');
          hash = hash + ''.replace(']', '');
        })
        .then(() => {
          this.sendDataForOtp(hash);
        })
        .catch(console.log)
    : this.sendDataForOtp(hash);
  };

sendDataForOtp(hash) {

axios.post(url,{hash:hash}).then(response=>{
  Alert.alert(
    'Login Failed',
    'Multiple Logins Are Found. \n Logout From All Other Devices to Continue.',
    [
      {
        text: 'Proceed ?',
        onPress: () => {}                       
      },
      {
        text: 'No',
        onPress: () => {},
      },
    ],
    {cancelable: false},
   );
  });
}


render() {
   return (
    <Ripple
        style={{
           position: 'absolute',
           top: 0,
           bottom: 0,
           left: 0,
           right: 0,
              }}
        onPress={this.checkForSendingOtp}
    />
)}

此代码段在 android 中可以正常工作，但不会在 iOS 中显示。为什么？

注意：- 这是我现在可以分享的大部分代码，编辑了代码，请立即检查，如果您有任何问题，请告诉我。

Answer 1

我不完全知道发生了什么，还有一个模型组件用于显示自定义加载，删除模型组件后警报开始工作。

Answer 2

将警报代码替换为以下

Alert.alert(
        'Login Failed',
        'Multiple Logins Are Found. \n Logout From All Other Devices to Continue.',
        [
          {
            text: 'Proceed ?',
            onPress: () => {}
          },
          {
            text: 'No',
            onPress: () => {},
            style: 'cancel'
          }
        ],
        { cancelable: false }
      );

Answer 3

它可能与这个问题有关： https : //github.com/facebook/react-native/issues/10471

出于一些奇怪的原因，在“setTimeout”函数中调用 Alert 使其工作。 但这显然不是避免此问题的安全方法。 你也可以试试这个解决方案： https : //github.com/facebook/react-native/issues/10471#issuecomment-513641325

 setTimeout(() => {
    Alert.alert(
      "title",
      "content",
      [
        {
          text: "ok",
          onPress: () => {

          },
        },
      ],
    )
  }, 10)

Answer 4

    setTimeout(() => {      
        //TODO  use return and setTimeout           
        return Alert.alert(
        i18n.t('notAtYard.alertTitle'),
        'Invalid username or password',
        [
            {
                text: 'Ok',
                onPress: () => {
                    setUserPassword('');
                    setUsername('');
                },
            }
        ],
        {cancelable: false},
    );

    }, 100);

Answer 5

所以在我的例子中，我没有使用任何自定义Modal ，因为对于自定义Modal ，解决方案很简单，可以等到Modal关闭，但是，我使用的是react-native Spinner组件，并且我使用visible={loading}正确隐藏了它prop 是的，在Alert.alert配置中设置cancelable: false后问题也没有解决，当我将超时增加到5000时，即使没有在Alert.alert配置中定义cancelable: false ，它也能正常工作，但这很多超时是不利于用户体验，所以我快速检查了Spinner组件道具，我开始知道它确实可以cancelable?: boolean | undefined cancelable?: boolean | undefined prop 所以现在当我像下面那样使用Spinner组件时，它甚至可以在没有超时的情况下工作。

<Spinner
    visible={loading}
    cancelable={true}
/>

TLDR：将cancelable={true}属性与Spinner组件一起使用。