Xử lý hành động nút trong React Native SDK

Nếu bạn đang xây dựng paywall bằng Adapty paywall builder, việc thiết lập các nút đúng cách là rất quan trọng:

Thêm nút trong paywall builder và gán cho nó một hành động có sẵn hoặc tạo một ID hành động tùy chỉnh.
Viết code trong ứng dụng để xử lý từng hành động bạn đã gán.

Hướng dẫn này hướng dẫn cách xử lý các hành động tùy chỉnh và các hành động có sẵn trong code của bạn.

Chỉ các hành động mua hàng, khôi phục, đóng paywall và mở URL được xử lý tự động. Tất cả các hành động nút khác đều cần được triển khai xử lý trong code ứng dụng.

Đóng paywall

Để thêm nút đóng paywall:

Trong paywall builder, thêm một nút và gán cho nó hành động Close.
Trong code ứng dụng, triển khai handler cho hành động close để đóng paywall.

Trong React Native SDK, hành động close mặc định sẽ kích hoạt việc đóng paywall. Tuy nhiên, bạn có thể ghi đè hành vi này trong code nếu cần. Ví dụ: đóng một paywall có thể kích hoạt mở một paywall khác.

Với React component, xử lý hành động đóng thông qua các prop handler sự kiện riêng lẻ:


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

Với modal presentation, triển khai handler đóng:


const view = await createPaywallView(paywall);

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

Với SDK version < 3.14, chỉ hỗ trợ modal presentation:


const view = await createPaywallView(paywall);

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

Mở URL từ paywall

Nếu bạn muốn thêm một nhóm liên kết (ví dụ: điều khoản sử dụng và khôi phục mua hàng), hãy thêm một phần tử Link trong paywall builder và xử lý nó giống như các nút có hành động Open URL.

Để thêm nút mở liên kết từ paywall (ví dụ: Terms of use hoặc Privacy policy):

Trong paywall builder, thêm một nút, gán cho nó hành động Open URL và nhập URL bạn muốn mở.
Trong code ứng dụng, triển khai handler cho hành động openUrl để mở URL nhận được trong trình duyệt.

Trong React Native SDK, hành động openUrl mặc định sẽ kích hoạt việc mở URL. Tuy nhiên, bạn có thể ghi đè hành vi này trong code nếu cần.

Với React component, xử lý việc mở URL thông qua prop handler sự kiện:


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

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

Với modal presentation, triển khai handler URL:


const view = await createPaywallView(paywall);

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

Với SDK version < 3.14, chỉ hỗ trợ modal presentation:


const view = await createPaywallView(paywall);

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

Đăng nhập vào ứng dụng

Để thêm nút cho phép người dùng đăng nhập vào ứng dụng:

Trong paywall builder, thêm một nút và gán cho nó hành động Login.
Trong code ứng dụng, triển khai handler cho hành động login để xác định người dùng.

Với React component, xử lý đăng nhập thông qua prop handler sự kiện:


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

Với modal presentation, triển khai handler đăng nhập:


const view = await createPaywallView(paywall);

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

Với SDK version < 3.14, chỉ hỗ trợ modal presentation:


const view = await createPaywallView(paywall);

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

Xử lý hành động tùy chỉnh

Để thêm nút xử lý các hành động khác:

Trong paywall builder, thêm một nút, gán cho nó hành động Custom và đặt một ID cho nó.
Trong code ứng dụng, triển khai handler cho ID hành động bạn đã tạo.

Ví dụ: nếu bạn có thêm một bộ ưu đãi gói đăng ký hoặc sản phẩm mua một lần, bạn có thể thêm nút để hiển thị một paywall khác:

Với React component, xử lý các hành động tùy chỉnh thông qua prop handler sự kiện:


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

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

Với modal presentation, triển khai các handler hành động tùy chỉnh:

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

Với SDK version < 3.14, chỉ hỗ trợ modal presentation:

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