关闭通过 Plaid SDK 打开的 UINavigationController

如何解决关闭通过 Plaid SDK 打开的 UINavigationController

我在将 Plaid SDK 集成到我们现有的 React Native 应用程序中遇到了障碍。

我们的 AppDelegate 中有一些旧代码，它们将根封装在 UINavigationController 中。这会导致我们在调用 Plaid SDK 时出现问题，因为您无法正确关闭 Plaid 界面。

我想知道在使用 UINavigationController 时是否可以通过 Plaid 关闭按钮关闭整个视图。

如果这很明显，我深表歉意，我仍在学习原生 iOS 和 Android 堆栈，并花了一段时间寻找解决方案但没有成功。

这是我们的 didFinishLaunchingWithOptions 方法端 AppDelegate.m 的片段：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"plaidRNDemo"
                                            initialProperties:nil];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  
  self.reactViewController = [UIViewController new];
  self.reactViewController.view = rootView;
  UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:self.reactViewController];
  navigationController.delegate = self;
  if (@available(iOS 13.0,*)) {
    self.window.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
    navigationController.navigationBar.barStyle = UIBarStyleDefault;
  }
  
  self.window.rootViewController = navigationController;
  [self.window makeKeyAndVisible];

  return YES;
}

点击此处的关闭按钮不会按预期关闭屏幕，而是以下面屏幕截图右侧的状态结束，并显示空白屏幕（可能是空视图）。

错误状态：

以下是来自 AppDelegate.m 的相同片段，其中我们不使用 UINavigationController 创建工作正常的视图，点击关闭按钮正确关闭整个视图：

{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"plaidRNDemo"
                                            initialProperties:nil];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

点击此处的关闭按钮可成功关闭整个视图，并在下面的屏幕截图中显示右侧的状态。不幸的是，我确实需要使用现有的实现来实现这一点。我希望有一种简单的方法可以在点击 SDK 中的关闭按钮时触发整个视图的关闭。

成功状态：

如果有人能在这里提供任何帮助，我将不胜感激?

触发 SDK 的 Javascipt 代码如下所示：

import React,{ useEffect } from "react";
import { View } from "react-native";
import { PlaidLink,LinkSuccess,LinkExit } from "react-native-plaid-link-sdk";
import { useDispatch,useSelector } from "react-redux";

import {
  LoadingContainer,Button,} from "sharedComponents";
import {
  getPlaidLinkToken,handlePlaidExit,} from "app/orders/bankAccount/bankAccountActions";
import { getBankAccountLinkingToken } from "app/orders/bankAccount/bankAccountSelectors";

const AddBankAccountContainer = () => {
  const dispatch = useDispatch();
  const linkingToken: string = useSelector(getBankAccountLinkingToken) ?? "";
  const onSuccess = (success: LinkSuccess) =>
  dispatch(handlePlaidSuccess(success));
const onExit = (exit: LinkExit) => dispatch(handlePlaidExit(exit));

  useEffect(() => {
    dispatch(getPlaidLinkToken());
  },[dispatch]);

  return (
    <LoadingContainer>
      ...
      <View style={[s.mt4,s.flx_i,s.jcfe,s.mb5]}>
        <PlaidLink
          tokenConfig={{
            token: linkingToken,}}
          onSuccess={onSuccess}
          onExit={onExit}
        >
          <Button I18nId={"bankAccount.addBank.cta"} />
        </PlaidLink>
      </View>
    </LoadingContainer>
  );
};

export default AddBankAccountContainer;

通过 react-navigation 导航到该组件：

import { createStackNavigator } from "react-navigation-stack";

const bottomTabScreens = {
  profileTab: {
    path: "profile",screen: createStackNavigator(
      ...
      {
        addBankAccount: {
          path: "bankAccount/add",screen: AddBankAccountContainer,},}

const MainNavigator = createStackNavigator(scenes,{
  mode: "modal",defaultNavigationOptions: () => ({
    animationEnabled: !isTest,cardStyleInterpolator: forFade,transitionSpec: modalTransitionSpec,headerShown: false,}),});

const AppNavigator = createAppContainer(MainNavigator);

解决方法

使用您的 MainNavigator，导航到您希望用户在链接退出后看到的页面。这可以通过将 navigation.pop(); 添加到 onSuccess

中的 onExit 和 AddBankAccountContainer 处理程序来完成