最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

react native - Expo Deep Linking - Stack Overflow

programmeradmin2浏览0评论

Unable to navigate to desired screen using deep linking. My app.json looks like

i am opening the link using npx uri-scheme open thegoldclass:///app/bookEvent --ios app is opening but it is not redirecting to book event screen.

{
  "expo": {
    "name": "TheGoldClass",
    "slug": "TheGoldClass",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/AppIcon.png",
    "userInterfaceStyle": "automatic",
    "scheme": "thegoldclass",
    "newArchEnabled": true,
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.thegoldclass.app"
    },

and linking config for react navigation is:

const prefixes = Linking.createURL('/');

const linking = {
  prefixes: [prefixes],
  config: {
    screens: {
      [FeatureRoutes.USER.BOOK_EVENT]: FeatureRoutes.USER.BOOK_EVENT,
    },
  },
};
export const UserRoutes = {
  DRAWER: '/app/drawer',
  HOME: '/app/home',
  DASHBOARD: '/app/dashboard',
  PROFILE: '/app/profile',
  SHARING: '/app/sharing',
  LEGAL: '/app/legal',
  CONTACT: '/app/contact',
  STATUS: '/app/status',
  PAY_FOR_QUOTES: '/app/payForQuotes',
  GST_FORM: '/app/gstForm',
  PAYMENT_GATEWAY: '/app/paymentGateway',
  TERMS_CONDITIONS: '/app/termsAndConditions',
  INVOICE: '/app/invoice',
  VIEW_INVOICE: '/app/viewInvoice',
  PAYMENT: '/app/payment',
  PAYMENT_SUCCESS: '/app/paymentSuccess',
  BOOK_EVENT: '/app/bookEvent',
  BOOKING_SUMMARY: '/app/user/bookingSummary',
} as const;

and navigation setup is

 <NavigationContainer theme={navTheme} linking={linking}>
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        <AlertComponent
          title="Are you sure you want to logout?"
          ref={logoutModalRef}
          yesAction={logOut}
          noAction={() => {
            setModalState(false);
          }}
        />
        {!isAuthenticated ? <ReturnAuthStack /> : <DrawerNav setModalState={setModalState} />}
      </ErrorBoundary>
    </NavigationContainer>

Drawer and navigation setup is like:

const DrawerNav = ({ setModalState }: { setModalState: (data: boolean) => void }) => {
  const layout = useWindowDimensions();
  return (
    <DrawerNavigator
      screenOptions={{
        ..monScreenOptions,
        drawerType: 'front',
        drawerPosition: 'left',
        swipeEnabled: false,
        drawerLabel: () => null,
        drawerStyle: { width: layout.width / 1.7, backgroundColor: theme.colors.mainBackground },
      }}
      drawerContent={props => <DrawerItem {...props} setModalState={setModalState} />}>
      <DrawerScreen name={FeatureRoutes.USER.DRAWER} component={ReturnAppStackWithRole} />
    </DrawerNavigator>
  );
};

App stack code:


const ReturnAppStackWithRole = () => {
  const { role } = useAuthenticationStore();

  switch (role) {
    case 'User':
      return (
        <StackNavigator
          screenOptions={{
            ..monScreenOptions,
          }}
          initialRouteName={FeatureRoutes.USER.HOME}>
          {MakeUserStack()}
        </StackNavigator>
      );
    case 'Hotel':
      return (
        <StackNavigator
          screenOptions={{ ..monScreenOptions }}
          initialRouteName={FeatureRoutes.HOTEL.HOME}>
          {MakeHotelStack()}
        </StackNavigator>
      );
    case 'Corporate':
      return (
        <StackNavigator
          screenOptions={{ ..monScreenOptions }}
          initialRouteName={FeatureRoutes.CORPORATE.HOME}>
          {MakeCorporateStack()}
        </StackNavigator>
      );

    default:
      break;
  }
};

const { Screen: StackScreen } = createNativeStackNavigator<UserScreensPropsType>();

export const MakeUserStack = () => {
  return (
    <>
      <StackScreen name={FeatureRoutes.USER.HOME} component={Home} />
      <StackScreen name={FeatureRoutes.USER.DASHBOARD} component={Dashboard} />
      <StackScreen name={FeatureRoutes.USER.PROFILE} component={Profile} />
      <StackScreen name={FeatureRoutes.USER.LEGAL} component={WebScreen} />
      <StackScreen name={FeatureRoutes.USER.SHARING} component={WebScreen} />
      <StackScreen name={FeatureRoutes.USER.CONTACT} component={WebScreen} />
      <StackScreen name={FeatureRoutes.USER.STATUS} component={StatusScreen} />
      <StackScreen name={FeatureRoutes.USER.PAY_FOR_QUOTES} component={PayToViewQuotes} />
      <StackScreen name={FeatureRoutes.USER.GST_FORM} component={GSTForm} />
      <StackScreen name={FeatureRoutes.USER.PAYMENT} component={Payment} />
      <StackScreen name={FeatureRoutes.USER.PAYMENT_GATEWAY} component={PaymentGateway} />
      <StackScreen name={FeatureRoutes.USER.TERMS_CONDITIONS} component={TermsAndCondition} />
      <StackScreen name={FeatureRoutes.USER.INVOICE} component={InvoiceScreen} />
      <StackScreen name={FeatureRoutes.USER.BOOK_EVENT} component={BookEvent} />
      <StackScreen name={FeatureRoutes.USER.BOOKING_SUMMARY} component={BookingSummary} />
    </>
  );
};
发布评论

评论列表(0)

  1. 暂无评论