当前位置：首页 > 文章列表 > 文章 > 前端 > 如何在 React Native 中集成 Tabby：分步指南

如何在 React Native 中集成 Tabby：分步指南

来源：dev.to 2025-01-19 23:43:19 0浏览收藏

从现在开始，我们要努力学习啦！今天我给大家带来《如何在 React Native 中集成 Tabby：分步指南》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

将 tabby 集成到 react native 应用程序中可以是一个无缝的过程，但网上没有提供分步方法的综合指南。本文整合了多个来源的信息，为您提供在 react native 应用程序中实现 tabby 的清晰路线图。

第 1 步：安装 tabby sdk
首先，您需要安装适用于 react native 的 tabby sdk。在项目目录中运行以下命令：

npm 我 tabby-react-native-sdk

第 2 步：更新特定于平台的配置

ios 配置对于 ios，请确保使用以下权限更新您的 info.plist 文件：

<key>nscamerausagedescription</key>
<string>this allows tabby to take a photo</string>
<key>nsphotolibraryusagedescription</key>
<string>this allows tabby to select a photo</string>

您可以自定义描述以适合您的应用。

安卓配置对于 android，请将这些权限添加到您的 androidmanifest.xml 文件中：

<uses-permission android:name=”android.permission.camera” />
<uses-permission android:name=”android.permission.read_external_storage” />
<uses-permission android:name=”android.permission.write_external_storage” />

这些权限确保 tabby 可以访问必要的资源。

第 3 步：在您的应用中初始化 tabby
要初始化 tabby，请将以下代码添加到应用程序的入口点（app.tsx 或 index.js）：

import {tabby} from 'tabby-react-native-sdk';

tabby.setapikey('__api_key_here__');

tabby.setapikey() 方法设置您的 api 密钥，允许您的应用程序通过 tabby 的后端服务进行身份验证。

将 api_key_here 替换为您的 tabby api 密钥。

第 4 步：创建付款流程

定义支付数据在您的购物车屏幕中，设置 tabby 所需的付款数据：

const customerpayment = {
  amount: 340.0,
  currency: 'sar',
  buyer: {
    email: 'successful.payment@tabby.ai',
    phone: '+971500000001',
  },
};

const mytestpayment = {
  merchant_code: 'your merchant code',
  lang: 'en',
  payment: customerpayment,
};

customerpayment 对象定义买家的付款详细信息，例如金额、货币和联系信息。 mytestpayment 对象包括特定于商家的详细信息，例如商家代码和首选语言。

创建会话触发按钮
在您的 ui 中添加一个按钮来触发会话创建过程

<button title="proceed with tabby" onpress={createcheckoutsession} />

按下此按钮会触发 createcheckoutsession 函数，启动付款流程。

实现会话创建逻辑
使用以下函数处理按钮按下：

const createcheckoutsession = async () => {
  try {
    const {sessionid, paymentid, availableproducts} =
      await tabby.createsession(mytestpayment);
    navigation.navigate('tabbywebviewscreen', {
      url: availableproducts[0].weburl,
    });
  } catch (error) {
    if (error.response) {
      console.error('response:', error.response);
      console.error('status:', error.response.status);
      console.error('data:', error.response.data);
    }
    console.error('error creating tabby checkout session', error);
  }
};

tabby.createsession() 方法使用付款数据创建结账会话。如果成功，响应将包含会话详细信息，例如 sessionid 和结帐 url。然后，用户将导航到新屏幕（tabbywebviewscreen）以完成付款。

第 5 步：创建 tabby webview 屏幕
设置一个新屏幕来显示 tabby 结账流程：

import React from 'react';
import {View, StyleSheet, Button} from 'react-native';
import {useNavigation, useRoute} from '@react-navigation/native';
import {TabbyPaymentWebView} from 'tabby-react-native-sdk';

const TabbyWebViewScreen = () => {
  const navigation = useNavigation();
  const route = useRoute();
  const {url} = route.params;

  const handlePaymentResult = message => {
    switch (message) {
      case 'authorized':
        console.log('Payment Authorized');
        navigation.goBack();
        break;
      case 'rejected':
        console.log('Payment Rejected');
        navigation.goBack();
        break;
      case 'close':
        console.log('Checkout Closed');
        navigation.goBack();
        break;
      case 'expired':
        console.log('Session Expired');
        navigation.goBack();
        break;
      default:
        break;
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.webViewContainer}>
        <TabbyPaymentWebView
          url={url}
          onBack={() => navigation.goBack()}
          onResult={handlePaymentResult}
        />
      </View>
      <Button title="Go Back" onPress={() => navigation.goBack()} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  webViewContainer: {
    marginTop: 50,
    height: '95%',
    backgroundColor: 'blue',
  },
});

export default TabbyWebViewScreen;