0Pricing
React Native Academy · 课时

React Navigation 深层链接配置

在 NavigationContainer 上配置带有屏幕映射的 linking 属性，使 React Navigation 在打开深层链接时自动导航到正确的屏幕。

React Navigation 深层链接配置 是 CoddyKit 上的免费 React Native Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Native Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Native Academy 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

React Navigation Built-In Deep Linking

React Navigation provides built-in deep linking support via a linking prop on the NavigationContainer. When configured, React Navigation automatically handles both cold-start and warm-start URLs by parsing them against a screen map and navigating to the matching screen — you don't need to write URL parsing or Linking API code manually.

This declarative approach is far less error-prone than manual URL handling and integrates seamlessly with the navigation library's state management.

import { NavigationContainer } from '@react-navigation/native';

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      Home: 'home',
      Profile: 'profile/:userId',
      Settings: 'settings',
    },
  },
};

<NavigationContainer linking={linking}>
  <RootNavigator />
</NavigationContainer>

The linking Prop: prefixes and config

The linking prop has two main fields: prefixes (an array of URL prefixes to handle) and config (the screen map). The prefixes array tells React Navigation which URL schemes to intercept. You can include both your custom scheme and your HTTPS domain for universal links.

The config.screens object maps screen component names to URL path patterns. The URL path after the prefix is matched against these patterns to determine which screen to navigate to.

const linking = {
  prefixes: [
    'myapp://',
    'https://www.myapp.com',  // universal links too
    'https://myapp.com',
  ],
  config: {
    screens: {
      Home: '',           // matches myapp:// (empty path)
      Profile: 'profile/:userId',   // myapp://profile/123
      Product: 'product/:id',        // myapp://product/abc
      Settings: 'settings',          // myapp://settings
    },
  },
};

Path Parameters and Query Strings

URL path parameters are defined with a colon prefix like :userId. When a URL matches, the parameter is automatically extracted and passed as a route param to the screen component. Query string parameters are also automatically parsed and added to route params.

For example, myapp://profile/123?tab=posts matches profile/:userId and the screen receives route.params = { userId: '123', tab: 'posts' }. No manual URL parsing needed.

// URL: myapp://profile/123?tab=posts
// Matches: profile/:userId
// Screen receives:
// route.params = { userId: '123', tab: 'posts' }

function ProfileScreen({ route }) {
  const { userId, tab } = route.params;
  // userId = '123', tab = 'posts'
}

Nested Navigator Configuration

When screens are inside nested navigators (e.g., a tab navigator with stacks in each tab), the screen map must reflect the nesting structure. Use a screens key inside the parent screen's config to define nested screen paths.

React Navigation handles the navigation state correctly — it sets up the entire stack needed to arrive at the deeply nested screen, including any parent navigators that need to be initialized first.

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      Tabs: {                    // bottom tab navigator
        screens: {
          HomeTab: {             // home tab stack
            screens: {
              Home: 'home',
              PostDetail: 'post/:postId',
            },
          },
          ProfileTab: {          // profile tab stack
            screens: {
              Profile: 'profile/:userId',
            },
          },
        },
      },
    },
  },
};

Exact Path Matching

By default React Navigation does prefix matching on paths. Add exact: true to a screen config to require an exact path match instead. Exact matching is important when paths could partially match multiple screens.

For example, without exact matching, the pattern post would match myapp://post and also myapp://post-list. With exact: true only the precise path matches.

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      PostList: {
        path: 'post',
        exact: true,  // only matches exactly myapp://post
      },
      PostDetail: 'post/:id', // matches myapp://post/123
    },
  },
};

Custom Parse and Stringify Functions

The linking config also accepts parse and stringify functions per screen to transform route params before passing them to the component. parse converts URL param strings to the correct types (e.g., string '123' to number 123). stringify converts params back to URL strings for link generation.

These functions give you full control over param transformation without needing to implement URL parsing yourself.

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      Profile: {
        path: 'profile/:userId',
        parse: {
          userId: (id) => Number(id),  // string to number
        },
        stringify: {
          userId: (id) => String(id),  // number back to string
        },
      },
    },
  },
};

getPathFromState and getStateFromPath

React Navigation provides getPathFromState and getStateFromPath utilities that convert between navigation state objects and URL path strings. These are useful for generating shareable deep links from the current navigation state and for custom state restoration logic.

getPathFromState(state, config) returns a URL path for the current navigation state. getStateFromPath(path, config) returns a navigation state for a given URL. Both require the same config object used in the linking prop.

import { getPathFromState, getStateFromPath } from '@react-navigation/native';

// Generate a shareable link for the current screen:
const currentState = navigationRef.current.getRootState();
const path = getPathFromState(currentState, linking.config);
const shareUrl = 'myapp://' + path;
// shareUrl = 'myapp://profile/123'

// Parse a URL to a navigation state:
const state = getStateFromPath('profile/123', linking.config);
// state = { routes: [{ name: 'Profile', params: { userId: '123' } }] }

Enabling Deep Links in Expo (Expo Go)

When running in Expo Go during development, your app's deep link URL uses the exp:// scheme with the Expo Go host. React Navigation handles this automatically when you include Linking.createURL('') in the prefixes array (using the expo-linking package), which resolves to the correct prefix for both Expo Go and production builds.

This means your deep link config works in both development (Expo Go) and production (your app's custom scheme) without any changes to the config.

import * as ExpoLinking from 'expo-linking';

const linking = {
  prefixes: [
    ExpoLinking.createURL('/'), // works in Expo Go AND production
    'myapp://',
    'https://www.myapp.com',
  ],
  config: {
    screens: {
      Home: '',
      Profile: 'profile/:userId',
    },
  },
};

Generating Deep Links Programmatically

Use Linking.createURL(path, options) from expo-linking to generate deep link URLs that work in both development and production. Pass query params in the queryParams option. Use the generated URLs in notifications, share sheets, and email campaigns.

This approach is safer than hardcoding scheme URLs because createURL produces the correct prefix for the current runtime environment automatically.

import * as ExpoLinking from 'expo-linking';

// Generate a profile deep link:
const profileLink = ExpoLinking.createURL('profile/123', {
  queryParams: { tab: 'posts', source: 'share_button' },
});
// In production: 'myapp://profile/123?tab=posts&source=share_button'
// In Expo Go: 'exp://127.0.0.1:19000/--/profile/123?tab=posts...'

await Share.share({ url: profileLink });

Testing the Linking Configuration

React Navigation provides a linking debug tool — set linking.enabled: 'auto' and the library logs URL matching results to the console in development. This helps diagnose why a URL is not navigating to the expected screen.

For comprehensive testing, write a test function that calls getStateFromPath with each of your expected deep link URLs and asserts the resulting navigation state is correct. This catches config errors before they reach users.

// Test your linking config:
import { getStateFromPath } from '@react-navigation/native';

const testCases = [
  { url: 'profile/123', expected: 'Profile' },
  { url: 'product/abc', expected: 'Product' },
  { url: 'settings', expected: 'Settings' },
];

testCases.forEach(({ url, expected }) => {
  const state = getStateFromPath(url, linking.config);
  const routeName = state.routes[0].name;
  console.assert(routeName === expected, 'Mismatch for ' + url);
});

Not Found Screen for Invalid Links

Configure a fallback screen for URLs that don't match any defined pattern. In the linking config, add a NotFound screen and set it as the fallback. This is important because deep links from third parties may use incorrect paths, and you should gracefully show a useful message instead of crashing or silently failing.

The not-found screen should explain that the link is no longer valid, provide a way to navigate to the home screen, and optionally log the invalid URL for analysis.

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      Home: '',
      Profile: 'profile/:userId',
      NotFound: '*',  // catch-all for unmatched paths
    },
  },
};

function NotFoundScreen() {
  const navigation = useNavigation();
  return (
    <View>
      <Text>This link is no longer valid.</Text>
      <Button
        title='Go Home'
        onPress={() => navigation.replace('Home')}
      />
    </View>
  );
}

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: the linking prop on NavigationContainer automatically handles deep link parsing and navigation using a declarative screen map, nested navigators are supported by nesting screens configs within parent screen configs, and ExpoLinking.createURL generates environment-aware deep links that work in both Expo Go and production builds. Next up we configure universal links using HTTPS URLs with Apple App Site Association and Android App Links.

常见问题解答

「React Navigation 深层链接配置」课时是免费的吗？

是的 — 「React Navigation 深层链接配置」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Native Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Native Academy 课程共包含 4 节课。

「React Navigation 深层链接配置」这节课中我会学到什么？

在 NavigationContainer 上配置带有屏幕映射的 linking 属性，使 React Navigation 在打开深层链接时自动导航到正确的屏幕。 你通过在浏览器中直接运行的动手代码来练习 React Native Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Native Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Native Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「React Navigation 深层链接配置」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Native Academy 课中编写并运行代码吗？

能。每节 React Native Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 配置自定义 URL 方案
  2. Linking API 与 URL 解析
  3. React Navigation 深层链接配置
  4. iOS 与 Android 上的通用链接（HTTPS 深层链接）
← 返回 React Native Academy