React-Native Alert：在alert中动态设置两个或三个按钮

Question

我需要在 React-Native 中设置一个警报（我也在使用 Expo，如果这在这里很重要的话）但我想设置它以便它根据我发送的数据显示 2 或 3 个按钮给它。一个简单的例子是：

import { Alert } from 'react-native';

const showConfirmationAlert = (val) => {
  return Alert.alert(
    "Alert title",
    "Alert text",
    [
      val !== null ? { text: "Option A", onPress: () => { ... } } : {},
      { text: "Option B", onPress: () => { ... } },
      { text: "Cancel"}
    ]
  );
};

现在，这有效，但如果 val === null，除选项 A 为空外，仍会显示 3 个选项。我无法将选项 A else 条件设置为 null，即 val !== null ? { text: "Option A", onPress: () => { ... } } : null，因为这会引发对象不能为 null 的错误。

我当然可以运行在调用警报之前检查 val === null 并简单地创建两个警报，每个警报一个，但我想知道是否可以设置这个系统并将其全部包含在一个警报中。

我还可以做到以下几点：

import { Alert } from 'react-native';

const showConfirmationAlert = (val) => {
  return Alert.alert(
    "Alert title",
    "Alert text",
    val !== null
      ? [
        { text: "Option A", onPress: () => { ... } } : {},
        { text: "Option B", onPress: () => { ... } },
        { text: "Cancel"}
      ]
      : [
        { text: "Option B", onPress: () => { ... } },
        { text: "Cancel"}
      ]
  );
};

不过好像代码重复太多了

有没有一种方法可以实现这一点，既不需要两个完全不同的警报，也不需要重复始终显示的两个选项？

Answer 1

您觉得这个解决方案怎么样？

import { Alert } from 'react-native';

const showConfirmationAlert = (val) => {

    const options = [{
        { text: "Option B", onPress: () => { ... } },
        { text: "Cancel"}
    }];

    if (val !== null) {
        options.unshift({ text: "Option A", onPress: () => { ... } });
    }

    return Alert.alert(
        "Alert title",
        "Alert text",
        options,
    );
};

您甚至可以将选项重命名为“baseOptions”之类的名称，并创建一个处理特殊情况的方法。目前您只有一个与 val 为 null 时相关的极端情况，但将来您可能会有更多。

React-Native Alert：在alert中动态设置两个或三个按钮

React-Native Alert: Dynamically set two or three buttons in the alert

javascript

alert

react-native

expo