ReactNativeの[アラート]ダイアログボックスを操作するにはどうすればよいですか？

アラートコンポーネントは、ダイアログボックス、つまり、表示されたメッセージに基づいてユーザーからの確認を知るためのタイトル、メッセージ、ボタンを含むポップアップをユーザーに表示するのに役立ちます。

Alertの基本コンポーネントは次のとおりです-

Alert.alert('yourtile', 'yourmessage', [yourbuttons], ‘options’)

Alertコンポーネントを使用するには、次のようにインポートする必要があります-

import { Alert } from 'react-native';

ポップアップを表示するには、Alert.alert（）関数を呼び出す必要があります。 alert（）が取る4つのパラメーターがあり、それはタイトル、メッセージ、ボタン、およびオプションです。タイトルは必須のパラメータで、残りはオプションです。

Alert.alert（）-

Alert.alert(
   "Hi",
   "Do you want to continue?",
   [
      {
         text: "Later",
         onPress: () => console.log("User pressed Later")
      },
      {
         text: "Cancel",
         onPress: () => console.log("Cancel Pressed"),
         style: "cancel"
      },
      { text: "OK",
         onPress: () => console.log("OK Pressed")
      }
   ],
   { cancelable: false }
);

ここでのタイトルは「こんにちは」、メッセージは「続行しますか」、ダイアログボックスに表示したいボタンは「後で」、「キャンセル」、「OK」です。ボタンごとにonPressイベントが追加され、コンソールメッセージが表示されます。最後はオプションパラメータです。これは、ポップアップの動作を制御するために使用できます。 Androidでは、デフォルトで、ポップアップの境界の外側をクリックすると、ポップアップが閉じられます。これを無効にするには、オプションパラメータとして{cancellable：false}を使用できます。ポップアップ領域の外側をクリックしても、キャンセル可能がfalseに設定されているため、ポップアップ領域は閉じられません。

iOSの場合はボタンをいくつでも指定できますが、Androidの場合は3つのボタンを使用できます。 Androidの3つのボタンには、たとえば、ニュートラル、ネガティブ、ポジティブボタンの概念があります-

• ボタンを1つ指定すると、「ポジティブ」のようになります。たとえば、「OK」のようになります。

• 2つのボタンの場合、最初は「負」、2番目は「正」になります。たとえば、「キャンセル」と「OK」です。

• 3つのボタンの場合、「ニュートラル」、「ネガティブ」、「ポジティブ」になります。たとえば、「後で」、「キャンセル」、「OK」

これは、アラートコンポーネントの動作を示す動作例です-

例1：アラートボックスの表示

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
   const testAlert = () =>
   Alert.alert(
      "Hi",
      "Do you want to continue?",
      [
         {
            text: "Later",
            onPress: () => console.log("User pressed Later")
         },
         {
            text: "Cancel",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
         },
         { text: "OK",
            onPress: () => console.log("OK Pressed")
         }
      ],
      { cancelable: false }
   );
   return (
      <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={testAlert}
         />
      </View>
   );
}
export default App;

出力

例2：Androidで{cancellable：true}を使用する

以下の例では、タイトル、メッセージ、ボタンとともに{cancelable：true}が使用されています。したがって、アラートボックスは次のようになります-

Alert.alert(
   "Hi",
   "Do you want to continue?",
   [
      {
         text: "Later",
         onPress: () => console.log("User pressed Later")
      },
      {
         text: "Cancel",
         onPress: () => console.log("Cancel Pressed"),
         style: "cancel"
      },
      { text: "OK",
         onPress: () => console.log("OK Pressed")
      }
   ],
   { cancelable: true }
);

完全な実例は次のとおりです-

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
   const testAlert = () =>
   Alert.alert(
      "Hi",
      "Do you want to continue?",
      [
         {
            text: "Later",
            onPress: () => console.log("User pressed Later")
         },
         {
            text: "Cancel",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
         },
         { text: "OK",
            onPress: () => console.log("OK Pressed")
         }
      ],
      { cancelable: true }
   );
   return (
      <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={testAlert}
         />
      </View>
   );
}
export default App;

ポップアップ領域の外側をクリックすると、ポップアップ領域が閉じます。

出力