Открыть модал на DeepLink с реагировать-навигации v5 (реагировать родной) - PullRequest
Новая
       29

Открыть модал на DeepLink с реагировать-навигации v5 (реагировать родной)

0 голосов
/ 17 апреля 2020

На реакции-нативной, я хотел бы открыть модальный при запуске Deeplink и оставить начальный стек позади.

Это работает, когда приложение находится на переднем или заднем плане.

Но когда приложение неактивно и запущено диплинк, присутствует только AddStack. Я не могу закрыть модальный (TakePicture) и показать MainStack (Покупка).

Как сохранить MainStack позади модального?

Моя диплинк - app_scheme: // покупки / покупка / новая /: Идентификатор покупки 

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>
  );
}
...