使用react-navigation v5（react-native）在深层链接上打开模式

Question

在反应本机上，我想在触发深度链接时打开一个模式并保留初始堆栈。

当应用程序处于前台或后台时它可以工作。

但是，当应用程序处于非活动状态并且深度链接被触发时，仅存在 AddStack。我无法关闭模式（TakePicture）并显示 MainStack（购买）。

如何将 MainStack 保持在模态后面？

我的深层链接是 app_scheme://purchases/purchase/new/:purchaseId

function App() {
  const ref = useRef();
  const logged = useSelector((state) => state.user.logged);

  const { getInitialState } = useLinking(ref, {
    prefixes: ['app_scheme://'],
    config: {
      AddStack: {
        screens: {
          TakePicture: {
            path: 'purchases/purchase/new/:purchaseId',
            parse: {
              purchaseId: Number,
            },
          },
        },
      },
    },
  });
  const [isReady, setIsReady] = useState(false);
  const [initialState, setInitialState] = useState();

  React.useEffect(() => {
    Promise.race([
      getInitialState(),
      new Promise((resolve) =>
        // Timeout in 150ms if `getInitialState` doesn't resolve
        // Workaround for https://github.com/facebook/react-native/issues/25675
        setTimeout(resolve, 150),
      ),
    ])
      .catch((e) => {
        console.error(e);
      })
      .then((state) => {
        if (state !== undefined) {
          setInitialState(state);
        }

        setIsReady(true);
      });
  }, [getInitialState]);

  if (!isReady) {
    return null;
  }

  return (
      <NavigationContainer initialState={initialState} ref={ref}>
        {logged ? <RootStack /> : <AuthStack />}
      </NavigationContainer>
  );
}

function RootStack() {
  return (
    <Stack.Navigator mode="modal" initialRouteName="MainStack">
      <Stack.Screen
        name="MainStack"
        component={MainStack}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="AddStack"
        component={AddStack}
        options={{
          headerShown: false,
        }}
      />
      ...
    </Stack.Navigator>
  );
}

function MainStack() {
  return (
    <Stack.Navigator initialRouteName="Purchases">
      <Stack.Screen
        name="Purchases"
        component={Purchases}
      />
      <Stack.Screen
        name="PurchaseDetail"
        component={PurchaseDetail}
      />
      ...
    </Stack.Navigator>
  );
}

export default function AddStack() {
  return (
    <Stack.Navigator initialRouteName="TakePicture">
      <Stack.Screen
        name="TakePicture"
        component={TakePicture}
      />
      ...
    </Stack.Navigator>
  );
}