Question

React本机警报可以等待用户的响应（就像暂停应用程序一样），而不仅仅是弹出窗口并继续以下逻辑吗？

我认为js警报只会暂停应用程序。

Answer 1

您可以使用Alert做以下事情：

您可以将false设置为cancelable，以便用户不按按钮就无法关闭警报

您可以使用每个按钮设置回调。

此外，您还可以使用Promise包装警报，以便可以使用异步

const AsyncAlert = () => {
    return new Promise((resolve, reject) => {
        Alert.alert(
            'Title',
            'Message',
            [
                {text: "YES", onPress: () => { resolve('YES') },
                {text: "NO", onPress: () => { resolve('NO') }
            ],
            { cancelable: false }
        )
    })
}    

// Then to use the method
const userResponse = await AsyncAlert()
// ...the rest of your code

Answer 2

我已使用@Tareq El-Masri代码并对其进行了编辑。将其更改为异步功能将起作用。

const AsyncAlert = async () => new Promise((resolve) => {
  Alert.alert(
    'info',
    'Message',
    [
      {
        text: 'ok',
        onPress: () => {
          resolve('YES');
        },
      },
    ],
    { cancelable: false },
  );
});

await AsyncAlert();

Answer 3

尽管其他答案非常正确，但它们仍然需要读者操纵要在其自己的代码中使用的功能（例如，更改按钮等）。这是一个很好的可导出版本，可让您传入一个函数来创建所需的任何按钮设置：

import { Alert as NativeAlert } from 'react-native';

const defaultButtons = (resolve, reject) => [
  {
    text: 'OK',
    onPress: () => {
      resolve();
    },
  },
];

const AsyncAlert = (title, msg, getButtons = defaultButtons) =>
  new Promise((resolve, reject) => {
    NativeAlert.alert(title, msg, getButtons(resolve, reject), { cancelable: false });
  });

export default AsyncAlert;

像这样使用：

await AsyncAlert('Some Title', 'Some message.')

如果要使用自定义按钮，只需传入一个函数作为第三个参数（如果需要，则可以解析和拒绝）。

React Native Alert是否可以等待用户响应？

3 个答案: