React Native SDKでボタンアクションに対応する

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

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

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

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

ペイウォールを閉じる

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

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

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

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


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}
    />
  );
}

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


const view = await createPaywallView(paywall);

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

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


const view = await createPaywallView(paywall);

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

ペイウォールからURLを開く

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

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

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

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

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


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

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

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


const view = await createPaywallView(paywall);

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

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


const view = await createPaywallView(paywall);

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

アプリにログインする

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

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

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


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}
    />
  );
}

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


const view = await createPaywallView(paywall);

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

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


const view = await createPaywallView(paywall);

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

カスタムアクションを処理する

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

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

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

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


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

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

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

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

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

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