Tính năng mua trong ứng dụng React native: cách triển khai đơn giản Hướng dẫn

yarn add react-native-adapty

#pods get installed into the native iOS project, which, by default, is the /ios folderpod install --project-directory=ios

... buildscript {    ... dependencies {      ... classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.0"    }  } ...

...  android {    ... defaultConfig {      ... multiDexEnabled true    }  }

// import the method import { activateAdapty } from 'react-native-adapty';  // We’ve had this App component in our app’s root const App: React.FC = () => {   ... // we’re invoking it once in a root component on mount   useEffect(() => {     activateAdapty({ sdkKey: 'MY_PUBLIC_KEY' });   },[]);   ... }

import { adapty } from 'react-native-adapty';  async function getProducts() { 	const {paywalls, products} = await adapty.paywalls.getPaywalls();  	return products; }

import React, { useEffect, useState } from "react"; import { Button, StyleSheet, View } from "react-native"; import { adapty, activateAdapty, AdaptyPaywall } from "react-native-adapty";  export const App: React.FC = () => {   const [paywalls, setPaywalls] = useState<AdaptyPaywall[]>([]);    useEffect(() => {     async function fetchPaywalls(): Promise<void> {       await activateAdapty({ sdkKey: "MY_PUBLIC_KEY" });        const result = await adapty.paywalls.getPaywalls();       setPaywalls(result.paywalls);     }      fetchPaywalls();   }, []);    return (     <View style={styles.container}>       <Button         title="Show the paywall"         onPress={() => {           const paywall = paywalls.find(             (paywall) => paywall.developerId === "cats_paywall"           );            if (!paywall) {             return alert("There is no such paywall");           } 					// Switching to a paywall...         }}       />     </View>   ); };  const styles = StyleSheet.create({   container: { flex: 1, alignItems: "center", justifyContent: "center" }, });

// there are more imports here import React, { useEffect, useState } from "react"; import {   Button,   SafeAreaView,   StyleSheet,   Text,   View,   PlatformColor, } from "react-native"; import {   adapty,   activateAdapty,   AdaptyPaywall,   AdaptyProduct, } from "react-native-adapty"; import { Navigation } from "react-native-navigation";  // ...  interface PaywallProps {   paywall: AdaptyPaywall;   onRequestBuy: (product: AdaptyProduct) => void | Promise<void>; } export const Paywall: React.FC<PaywallProps> = ({ paywall, onRequestBuy }) => {   const [isLoading, setIsLoading] = useState<boolean>(false);    return (     <SafeAreaView style={styles.container}>       {paywall.products.map((product) => (         <View key={product.vendorProductId}>           <Text>{product.localizedTitle}</Text>           <Button             title={`Buy for за ${product.localizedPrice}`}             disabled={isLoading}             onPress={async () => {               try {                 setIsLoading(true);                 await onRequestBuy(product);               } catch (error) {                 alert("Error occured :(");               } finally {                 setIsLoading(false);               }             }}           />         </View>       ))}     </SafeAreaView>   ); };  // A new key const styles = StyleSheet.create({   container: { flex: 1, alignItems: "center", justifyContent: "center" },   paywallContainer: {     flex: 1,     alignItems: "center",     justifyContent: "space-evenly",     backgroundColor: PlatformColor("secondarySystemBackground"),   }, });

import "react-native-gesture-handler"; import { Navigation } from "react-native-navigation";  import { App, Paywall } from "./App";  Navigation.registerComponent("Home", () => App); Navigation.registerComponent("Paywall", () => Paywall);  Navigation.events().registerAppLaunchedListener(() => {   Navigation.setRoot({     root: { stack: { children: [{ component: { name: "Home" } }] } },   }); });

Navigation.showModal<PaywallProps>({     component: {       name: "Paywall",       passProps: {         paywall,         onRequestBuy: async (product) => {           const purchase = await adapty.purchases.makePurchase(product);           // Doing everything we need           console.log("purchase", purchase);         },       },     },   });

import React, { useEffect, useState } from "react"; import {   Button,   SafeAreaView,   StyleSheet,   Text,   View,   PlatformColor, } from "react-native"; import {   adapty,   activateAdapty,   AdaptyPaywall,   AdaptyProduct, } from "react-native-adapty"; import { Navigation } from "react-native-navigation"; export const App: React.FC = () => {   const [paywalls, setPaywalls] = useState<AdaptyPaywall[]>([]);   useEffect(() => {     async function fetchPaywalls(): Promise<void> {       await activateAdapty({         sdkKey: "MY_PUBLIC_KEY",       });        const result = await adapty.paywalls.getPaywalls();       setPaywalls(result.paywalls);     }      fetchPaywalls();   }, []);    return (     <View style={styles.container}>       <Button         title="Show paywall"         onPress={() => {           const paywall = paywalls.find(             (paywall) => paywall.developerId === "cats_paywall"           );            if (!paywall) {             return alert("There is no such paywall");           }            Navigation.showModal<PaywallProps>({             component: {               name: "Paywall",               passProps: {                 paywall,                 onRequestBuy: async (product) => {                   const purchase = await adapty.purchases.makePurchase(product);                   // Doing everything we need                   console.log("purchase", purchase);                 },               },             },           });         }}       />     </View>   ); };  interface PaywallProps {   paywall: AdaptyPaywall;   onRequestBuy: (product: AdaptyProduct) => void | Promise<void>; } export const Paywall: React.FC<PaywallProps> = ({ paywall, onRequestBuy }) => {   const [isLoading, setIsLoading] = useState<boolean>(false);    return (     <SafeAreaView style={styles.paywallContainer}>       {paywall.products.map((product) => (         <View key={product.vendorProductId}>           <Text>{product.localizedTitle}</Text>           <Button             title={`Buy for ${product.localizedPrice}`}             disabled={isLoading}             onPress={async () => {               try {                 setIsLoading(true);                 await onRequestBuy(product);               } catch (error) {                 alert("Error occured :(");               } finally {                 setIsLoading(false);               }             }}           />         </View>       ))}     </SafeAreaView>   ); };  const styles = StyleSheet.create({   container: { flex: 1, alignItems: "center", justifyContent: "center" },   paywallContainer: {     flex: 1,     alignItems: "center",     justifyContent: "space-evenly",     backgroundColor: PlatformColor("secondarySystemBackground"),   }, });

// ... export const App: React.FC = () => { 	const [isLoading, setIsLoading] = useState<boolean>(true); 	const [isPremium, setIsPremium] = useState<boolean>(false);   const [paywalls, setPaywalls] = useState<AdaptyPaywall[]>([]);  	useEffect(() => {     async function fetchPaywalls(): Promise<void> {       try {         await activateAdapty({           sdkKey: "MY_PUBLIC_KEY",         });          const profile = await adapty.purchases.getInfo();         const isSubscribed = profile.accessLevels.premium.isActive;         setIsPremium(isSubscribed);          if (!isSubscribed) {           const result = await adapty.paywalls.getPaywalls();           setPaywalls(result.paywalls);         }       } finally {         setIsLoading(false);       }     }      fetchPaywalls();   }, []);    // ... } // ...

export const App: React.FC = () => { // ... const renderContent = (): React.ReactNode => {   if (isLoading) {     return <Text>Loading...</Text>;   }    if (isPremium) {     return (       <Image         source={{           url: "https://25.media.tumblr.com/tumblr_lugj06ZSgX1r4xjo2o1_500.gif",           width: Dimensions.get("window").width * 0.8,           height: Dimensions.get("window").height * 0.8,         }}       />     );   }    return (     <Button       title="Show paywall"       onPress={() => {         const paywall = paywalls.find(           (paywall) => paywall.developerId === "cats_paywall"         );          if (!paywall) {           return alert("There is no such paywall");         }          Navigation.showModal<PaywallProps>({           component: {             name: "Paywall",             passProps: { 	            paywall, 		          onRequestBuy: async (product) => { 		            const purchase = await adapty.purchases.makePurchase(product); 	              const isSubscribed = 		              purchase.purchaserInfo.accessLevels?.premium.isActive;                 setIsPremium(isSubscribed);                 Navigation.dismissAllModals();               },             },           },         });       }}     />   ); };  return <View style={styles.container}>{renderContent()}</View>; };

import React, { useEffect, useState } from "react"; import {   Button,   SafeAreaView,   StyleSheet,   Text,   View,   PlatformColor,   Image,   Dimensions, } from "react-native"; import {   adapty,   activateAdapty,   AdaptyPaywall,   AdaptyProduct, } from "react-native-adapty"; import { Navigation } from "react-native-navigation";  export const App: React.FC = () => {   const [isLoading, setIsLoading] = useState<boolean>(true);   const [isPremium, setIsPremium] = useState<boolean>(false);   const [paywalls, setPaywalls] = useState<AdaptyPaywall[]>([]);    useEffect(() => {     async function fetchPaywalls(): Promise<void> {       try {         await activateAdapty({           sdkKey: "MY_PUBLIC_KEY",         });          const profile = await adapty.purchases.getInfo();         const isSubscribed = profile.accessLevels.premium.isActive;         setIsPremium(isSubscribed);          if (!isSubscribed) {           const result = await adapty.paywalls.getPaywalls();           setPaywalls(result.paywalls);         }       } finally {         setIsLoading(false);       }     }      fetchPaywalls();   }, []);    const renderContent = (): React.ReactNode => {     if (isLoading) {       return <Text>Loading...</Text>;     }      if (isPremium) {       return (         <Image           source={{             uri: "https://25.media.tumblr.com/tumblr_lugj06ZSgX1r4xjo2o1_500.gif",             width: Dimensions.get("window").width * 0.8,             height: Dimensions.get("window").height * 0.8,           }}         />       );     }      return (       <Button         title="Show a paywall"         onPress={() => {           const paywall = paywalls.find(             (paywall) => paywall.developerId === "cats_paywall"           );            if (!paywall) {             return alert("There is no such a paywall");           }            Navigation.showModal<PaywallProps>({             component: {               name: "Paywall",               passProps: {                 paywall,                 onRequestBuy: async (product) => {                   const purchase = await adapty.purchases.makePurchase(product);                   const isSubscribed =                     purchase.purchaserInfo.accessLevels?.premium.isActive;                   setIsPremium(isSubscribed);                   Navigation.dismissAllModals();                 },               },             },           });         }}       />     );   };    return <View style={styles.container}>{renderContent()}</View>; }; interface PaywallProps {   paywall: AdaptyPaywall;   onRequestBuy: (product: AdaptyProduct) => void | Promise<void>; } export const Paywall: React.FC<PaywallProps> = ({ paywall, onRequestBuy }) => {   const [isLoading, setIsLoading] = useState<boolean>(false);    return (     <SafeAreaView style={styles.paywallContainer}>       {paywall.products.map((product) => (         <View key={product.vendorProductId}>           <Text>{product.localizedTitle}</Text>           <Button             title={`Buy for ${product.localizedPrice}`}             disabled={isLoading}             onPress={async () => {               try {                 setIsLoading(true);                 await onRequestBuy(product);               } catch (error) {                 alert("An error occured :(");               } finally {                 setIsLoading(false);               }             }}           />         </View>       ))}     </SafeAreaView>   ); };  const styles = StyleSheet.create({   container: { flex: 1, alignItems: "center", justifyContent: "center" },   paywallContainer: {     flex: 1,     alignItems: "center",     justifyContent: "space-evenly",     backgroundColor: PlatformColor("secondarySystemBackground"),   }, });