如何以等待警报对话框的响应在本地做出反应？

Question

从我的观察，Alert对话似乎建立在阵营本机应用程序的顶部。因此，它弹出你怎么称呼它每次，并且不会是在render功能。 美中不足的是它不是一个异步任务，以便以后Alert代码将继续无论执行回调函数。

下面的代码演示，其中Alert对话框不断出现，因为它一遍又一遍地读同一条码的情况。 （这是写在打字稿。就拿我的话，这是一个有效的片段。）

 import * as React from "react";
 import Camera from "react-native-camera";
 import { Alert } from "react-native";

 export default class BarcodeScanSreen extends React.Component<any ,any> {
 private _camera;
 private _onBarCodeRead = e => {
    if (e.type === "QR_CODE") {
        Alert.alert(
            "QRCode detected",
            "Do you like to run the QRCode?",
            [
                { text: "No", onPress: this._onNoPress },
                { text: "Yes", onPress: this._onYesPress }
            ],
            { cancelable: false }
        );
    }
};

 private _onYesPress = () => { /* process the QRCode */ }

 private _onNoPress = () => { /* close the alert dialog. */ }

render() {
    return (
        <Camera
            onBarCodeRead={this._onBarCodeRead}
            aspect={Camera.constants.Aspect.fill}
            ref={ref => (this._camera = ref)}
        >
            {/* Some another somponents which on top of the camera preview... */}
        </Camera>
    );
}
}

有没有办法暂停JS代码，并等待来自Alert反应？

Answer 1

警报不会暂停代码。在这种情况下JS是不是唯一的问题 - Camera分量也不断在为母语的后台运行，它会触发onBarCodeRead听众，不管警报存在或不存在。

你可以尝试在开始与在_onBarCodeRead提到的stopPreview()方法停止相机docs。

还要注意的是react-native-camera目前正处于从Camera（RCTCamera）迁移过程RNCamera，并在新RNCamera我没有看到一个stopPreview()方法。总之，一个简单的标志也将做的工作。

Answer 2

反应本地警报不会停止它下面代码的执行。通过将其更改为一种能解决用户的行动承诺将作为异步警报异步功能。

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

await AsyncAlert();

Answer 3

使用react-native-alert-async

我刚刚发布了一个包，正是这一点，并允许以等待用户的选择。它与世博会相兼容。

 import AlertAsync from "react-native-alert-async";


 const myAction = async () => {

   const choice = await AlertAsync(
     'Title',
     'Message',
     [
       {text: 'Yes', onPress: () => 'yes'},
       {text: 'No', onPress: () => Promise.resolve('no')},
     ],
     {
       cancelable: true,
       onDismiss: () => 'no',
     },
   );


   if (choice === 'yes') {
     doSomething();
   }
   else {
     doSomethingElse();
   }

 }

---

原来的答案：我做了一个PR反应原住民此功能：qazxsw POI

Answer 4

我有一些办法解决这个，如果你有一个像下面报警功能

https://github.com/facebook/react-native/pull/20312

此代码不会等待警报的响应，它会立即执行

     Alert.alert(
                'Delete comment?',
                'Are you sure you want to delete this comment?',
                [
                    {
                        text: 'Cancel',
                        onPress: () => console.log('Cancel Pressed'),
                        style: 'cancel',
                    },
                    { text: 'yes', onPress:() => this.props.deleteComment(commentId),
                ],
                { cancelable: false },
            );
  //call after comment is deleted
  refreshPage();

。

所以，你可以这样做

refreshPage()

Answer 5

我喜欢用两个小效用函数用于此目的，其循环/休眠状态，直到满足某些条件。与

         Alert.alert(
                    'Delete comment?',
                    'Are you sure you want to delete this comment?',
                    [
                        {
                            text: 'Cancel',
                            onPress: () => console.log('Cancel Pressed'),
                            style: 'cancel',
                        },
                        { text: 'yes', onPress: async () => {await this.props.deleteComment(commentId);refreshPage();},
                    ],
                    { cancelable: false },
                );

调用它阻断执行，并提供条件为函数。

除了与警报，你可以用它来等待其他条件也。

await

使用这样的：

export function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

export async function until(fn, ms=10) {
  while (!fn()) await sleep(ms)
}