【React Native】Alertダイアログの使い方を徹底解説！基本構文から実装例まで

React NativeのAlertダイアログとは

React NativeのAlertコンポーネントは、タイトル・メッセージ・ボタンを備えたダイアログ（ポップアップ）をユーザーに表示し、画面上のメッセージに対する確認を取るために使われる機能です。

Alert.alert()の基本構文

Alertの基本形は以下のとおりです。

Alert.alert('タイトル', 'メッセージ', [ボタンの配列], 'オプション');

Alertコンポーネントを利用するには、まずreact-nativeからインポートします。

import { Alert } from 'react-native';

ポップアップを表示するには、Alert.alert()関数を呼び出すだけです。この関数は「タイトル」「メッセージ」「ボタン」「オプション」の4つの引数を受け取り、そのうち必須なのはタイトルだけで、残りの3つはすべて省略可能です。

シンプルな使用例

以下はAlert.alert()の簡単な使用例です。

Alert.alert(
  "こんにちは",
  "続行しますか？",
  [
    {
      text: "後で",
      onPress: () => console.log("「後で」が押されました")
    },
    {
      text: "キャンセル",
      onPress: () => console.log("キャンセルが押されました"),
      style: "cancel"
    },
    {
      text: "OK",
      onPress: () => console.log("OKが押されました")
    }
  ],
  { cancelable: false }
);

この例では、タイトルが「こんにちは」、メッセージが「続行しますか？」となっており、ダイアログには「後で」「キャンセル」「OK」の3つのボタンを表示しています。各ボタンにはonPressイベントを設定してあり、押されたボタンに応じてコンソールにメッセージが出力されます。

最後の引数はオプション項目で、ポップアップの挙動を制御するために使用します。Androidではデフォルトで、ダイアログの範囲外をタップするとポップアップが閉じる仕様になっています。この動作を無効化したい場合は、オプションとして{ cancelable: false }を指定します。こうすることで、ダイアログの外側をクリックしても閉じなくなります。

iOSとAndroidでのボタン数の違い

iOSではボタンの数に制限はありませんが、Androidでは最大3つまでしか使えません。Androidの3つのボタンにはそれぞれ役割があり、「中立（neutral）」「否定（negative）」「肯定（positive）」という概念に対応しています。

• ボタンが1つの場合：そのボタンは「肯定（positive）」として扱われます。例：「OK」

• ボタンが2つの場合：1つ目が「否定（negative）」、2つ目が「肯定（positive）」になります。例：「キャンセル」「OK」

• ボタンが3つの場合：「中立（neutral）」「否定（negative）」「肯定（positive）」の順に割り当てられます。例：「後で」「キャンセル」「OK」

実装例1：アラートボックスを表示する

Alertコンポーネントの動作を確認できる、実際に動作するサンプルコードです。

import React from 'react';
import { Button, View, Alert } from 'react-native';

const App = () => {
  const testAlert = () =>
    Alert.alert(
      "こんにちは",
      "続行しますか？",
      [
        {
          text: "後で",
          onPress: () => console.log("「後で」が押されました")
        },
        {
          text: "キャンセル",
          onPress: () => console.log("キャンセルが押されました"),
          style: "cancel"
        },
        {
          text: "OK",
          onPress: () => console.log("OKが押されました")
        }
      ],
      { cancelable: false }
    );

  return (
    <View style={{ flex: 1, justifyContent: 'center', margin: 15 }}>
      <Button
        title="クリックしてください"
        color="#9C27B0"
        onPress={testAlert}
      />
    </View>
  );
}

export default App;

実行結果

実装例2：{ cancelable: true }を指定する（Android向け）

次に、オプションを{ cancelable: true }に変更した例を見てみましょう。アプリ全体のコード構成は実装例1と同じで、Alert.alert()の最終引数だけが異なります。

const testAlert = () =>
  Alert.alert(
    "こんにちは",
    "続行しますか？",
    [
      {
        text: "後で",
        onPress: () => console.log("「後で」が押されました")
      },
      {
        text: "キャンセル",
        onPress: () => console.log("キャンセルが押されました"),
        style: "cancel"
      },
      {
        text: "OK",
        onPress: () => console.log("OKが押されました")
      }
    ],
    { cancelable: true }
  );

この場合、ダイアログの外側のエリアをクリックするとポップアップが閉じるようになります。

実行結果

まとめ

• Alert.alert()の引数は「タイトル（必須）」「メッセージ」「ボタン」「オプション」の4つ。
• 各ボタンにはonPressでタップ時の処理を定義でき、キャンセルボタンにはstyle: "cancel"を指定できる。
• Androidではボタンは最大3つ（中立・否定・肯定）までだが、iOSでは数に制限がない。
• { cancelable: false }を指定すると、Androidでダイアログ外をタップしても閉じなくなる。