---
title: "React Native SDKでボタンアクションに対応する"
description: "AdaptyのReact Nativeでペイウォールのボタンアクションを処理して、アプリのマネタイズを改善しましょう。"
---

Adaptypのペイウォールビルダーを使ってペイウォールを作成する場合、ボタンを正しく設定することが重要です：

1. [ペイウォールビルダーでボタンを追加](paywall-buttons)し、既存のアクションを割り当てるか、カスタムアクションIDを作成します。
2. 割り当てた各アクションを処理するコードをアプリに記述します。

このガイドでは、コード内でカスタムアクションおよび既存アクションを処理する方法を説明します。

:::warning
**購入、復元、ペイウォールのクローズ、URLの開放は自動的に処理されます。** それ以外のボタンアクションはすべて、アプリコードで適切な処理を実装する必要があります。
:::

## ペイウォールを閉じる \{#close-paywalls\}

ペイウォールを閉じるボタンを追加するには：

1. ペイウォールビルダーでボタンを追加し、**Close** アクションを割り当てます。
2. アプリコードで、ペイウォールを閉じる `close` アクションのハンドラーを実装します。

:::info
React Native SDKでは、`close` アクションはデフォルトでペイウォールを閉じます。ただし、必要に応じてコードでこの動作をオーバーライドできます。たとえば、あるペイウォールを閉じると別のペイウォールが開くようにすることもできます。
:::

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Reactコンポーネントの場合、個別のイベントハンドラーpropを通じてcloseアクションを処理します：

```javascript

function MyPaywall({ paywall }) {
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press - navigate away or hide component
    navigation.goBack();
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

モーダル表示の場合、closeハンドラーを実装します：

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

SDKバージョン3.14未満では、モーダル表示のみサポートされています：

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});
```

</TabItem>
</Tabs>

## ペイウォールからURLを開く \{#open-urls-from-paywalls\}

:::tip
リンクのグループ（利用規約や購入の復元など）を追加したい場合は、ペイウォールビルダーに **Link** 要素を追加し、**Open URL** アクションが設定されたボタンと同様に処理してください。
:::

ペイウォールからリンク（**利用規約**や**プライバシーポリシー**など）を開くボタンを追加するには：

1. ペイウォールビルダーでボタンを追加し、**Open URL** アクションを割り当て、開きたいURLを入力します。
2. アプリコードで、受け取ったURLをブラウザで開く `openUrl` アクションのハンドラーを実装します。

:::info
React Native SDKでは、`openUrl` アクションはデフォルトでURLを開きます。ただし、必要に応じてコードでこの動作をオーバーライドできます。
:::

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Reactコンポーネントの場合、イベントハンドラーpropを通じてURLの開放を処理します：

```javascript

function MyPaywall({ paywall }) {
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onUrlPress={onUrlPress}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

モーダル表示の場合、URLハンドラーを実装します：

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep paywall open
    },
});
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

SDKバージョン3.14未満では、モーダル表示のみサポートされています：

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep paywall open
    },
});
```

</TabItem>
</Tabs>

## アプリにログインする \{#log-into-the-app\}

ユーザーをアプリにログインさせるボタンを追加するには：

1. ペイウォールビルダーでボタンを追加し、**Login** アクションを割り当てます。
2. アプリコードで、ユーザーを識別する `login` アクションのハンドラーを実装します。

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Reactコンポーネントの場合、イベントハンドラーpropを通じてログインを処理します：

```javascript

function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'login') {
      navigation.navigate('Login');
    }
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

モーダル表示の場合、ログインハンドラーを実装します：

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'login') {
            navigation.navigate('Login');
        }
    }
});
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

SDKバージョン3.14未満では、モーダル表示のみサポートされています：

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'login') {
            navigation.navigate('Login');
        }
    }
});
```

</TabItem>
</Tabs>

## カスタムアクションを処理する \{#handle-custom-actions\}

その他のアクションを処理するボタンを追加するには：

1. ペイウォールビルダーでボタンを追加し、**Custom** アクションを割り当て、IDを設定します。
2. アプリコードで、作成したアクションIDのハンドラーを実装します。

たとえば、別のサブスクリプションオファーや買い切り購入のセットがある場合、別のペイウォールを表示するボタンを追加できます：

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Reactコンポーネントの場合、イベントハンドラーpropを通じてカスタムアクションを処理します：

```javascript

function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'openNewPaywall') {
      // Display another paywall
    }
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

モーダル表示の場合、カスタムアクションハンドラーを実装します：

```javascript
const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another paywall
        }
    },
});
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

SDKバージョン3.14未満では、モーダル表示のみサポートされています：

```javascript
const unsubscribe = view.registerEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another paywall
        }
    },
});
```

</TabItem>
</Tabs>