Hey there! I’ve dealt with this exact deep linking challenge in React Navigation v1 when using a Stack Navigator nested inside a Tab Navigator—totally get why the docs feel lacking here. Let me break down how to make it work step by step:

1. Set Up Paths for Every Navigator Level #

First, you need to define path attributes for both your Tab Navigator and the nested Stack Navigators. This tells React Navigation how to map URL segments to your routes.

Here’s a code example of the navigation structure:

import { StackNavigator, TabNavigator } from 'react-navigation';

// Define nested Stack Navigators for each tab
const HomeStack = StackNavigator({
  HomeScreen: { 
    screen: HomeScreenComponent,
    path: '' // Empty path means this is the default screen for the stack
  },
  ItemDetails: { 
    screen: ItemDetailsComponent,
    path: 'details/:itemId' // Dynamic parameter for the details screen
  }
});

const ProfileStack = StackNavigator({
  ProfileScreen: { 
    screen: ProfileScreenComponent,
    path: ''
  },
  UserSettings: { 
    screen: SettingsComponent,
    path: 'settings'
  }
});

// Define the parent Tab Navigator with paths for each tab
const MainTabs = TabNavigator({
  HomeTab: { 
    screen: HomeStack,
    path: 'home' // Maps to myapp://home
  },
  ProfileTab: { 
    screen: ProfileStack,
    path: 'profile' // Maps to myapp://profile
  }
});

// Optional: Outer Stack Navigator if you have auth/splash screens
const AppNavigator = StackNavigator({
  MainTabs: { screen: MainTabs },
  AuthScreen: { screen: AuthComponent }
});

2. Handle URL Opening and Navigation Dispatch #

Next, you need to listen for incoming deep links, parse the URL, and dispatch the correct navigation actions to navigate through both the Tab and Stack layers.

Add this logic to your root App component:

import { Linking, NavigationActions } from 'react-native';

class App extends Component {
  componentDidMount() {
    // Listen for incoming links while the app is running
    Linking.addEventListener('url', this.handleDeepLink);
    // Check for a deep link that opened the app initially
    Linking.getInitialURL().then(url => {
      if (url) this.handleDeepLink({ url });
    });
  }

  componentWillUnmount() {
    Linking.removeEventListener('url', this.handleDeepLink);
  }

  handleDeepLink = ({ url }) => {
    // Replace your app's URL prefix (e.g., myapp://) to get the path
    const pathSegments = url.replace(/myapp:\/\//, '').split('/');
    
    // Map the first path segment to the corresponding tab route
    let tabRouteName;
    switch(pathSegments[0]) {
      case 'home':
        tabRouteName = 'HomeTab';
        break;
      case 'profile':
        tabRouteName = 'ProfileTab';
        break;
      default:
        return; // Exit if the tab doesn't exist
    }

    // Get the remaining path segments for the nested stack
    const stackPath = pathSegments.slice(1).join('/');
    
    // Convert the stack path to a navigation action
    const stackAction = AppNavigator.router.getActionForPathAndParams(stackPath);

    // Dispatch the navigation: first navigate to the tab, then run the stack action
    this.navigator.dispatch(
      NavigationActions.navigate({
        routeName: tabRouteName,
        action: stackAction // Nested action for the stack inside the tab
      })
    );
  }

  render() {
    return (
      <AppNavigator
        ref={nav => this.navigator = nav} // Get a ref to the navigator to dispatch actions
      />
    );
  }
}

Key Notes to Remember #

• URL Structure: Your deep links should follow the pattern myapp://[tab-path]/[stack-path], e.g., myapp://home/details/123 to open the ItemDetails screen in the Home tab, or myapp://profile/settings to open the Settings screen in the Profile tab.
• Dynamic Params: The :itemId in the Stack path will automatically be parsed into navigation.state.params.itemId in your ItemDetails screen.
• Nested Actions: The critical part is passing the stack action as the action property inside the navigate action for the tab—this tells React Navigation to navigate within the tab's stack after switching to the tab.

内容的提问来源于stack exchange，提问作者Devansh sadhotra