关闭通过 Plaid SDK 打开的 UINavigationController

Question

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

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

我试图弄清楚在使用UINavigationController 时是否可以通过格子关闭按钮关闭整个视图。

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

这是我们didFinishLaunchingWithOptions方法端AppDelegate.m的sn-p：

- (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 的相同sn-p，其中我们不使用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);

Answer 1

使用您的MainNavigator，导航到您希望用户在链接退出后看到的页面。这可以通过将navigation.pop(); 添加到AddBankAccountContainer 中的onSuccess 和onExit 处理程序来完成