react-navigation Deep Linking打开App但无法跳转至指定页面

Hey there! Let's break down why your deep link opens the app but doesn't jump to the Notifications screen. Based on your setup, here are the most likely issues and fixes:

1. AuthLoading/Splash Screen is Overriding Deep Link Navigation #

Your Switch Navigator starts with SplashScreen and AuthLoadingScreen — when you open the app via deep link, these screens run first and navigate to the App (BottomTabNav) with its default Home screen, completely ignoring the deep link URL.

Fix: #

Modify your AuthLoadingScreen to capture the initial deep link URL and use it to navigate correctly after authentication checks:

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

class AuthLoadingScreen extends Component {
  state = {
    initialUrl: null,
  };

  componentDidMount() {
    this.fetchInitialUrl();
    this.checkAuthStatus(); // Your existing auth check logic
  }

  fetchInitialUrl = async () => {
    const url = await Linking.getInitialURL();
    if (url) this.setState({ initialUrl: url });
  };

  checkAuthStatus = async () => {
    // Your existing code to check if user is logged in
    const isLoggedIn = await yourAuthCheckFunction();

    if (isLoggedIn) {
      if (this.state.initialUrl) {
        // Parse the deep link and navigate to the target screen
        const { params } = Linking.parse(this.state.initialUrl);
        // Navigate to App -> Notifications (adjust based on your route structure)
        this.props.navigation.dispatch(
          StackActions.reset({
            index: 0,
            actions: [
              NavigationActions.navigate({
                routeName: 'App',
                params: { screen: 'Notifications', params },
              }),
            ],
          })
        );
      } else {
        this.props.navigation.navigate('App'); // Default to Home
      }
    } else {
      this.props.navigation.navigate('Auth');
    }
  };

  // ... rest of your component
}

2. Missing Linking Event Listener for Background App #

When the app is already running (in background), the uriPrefix alone won't trigger navigation. You need to listen for incoming deep link events and handle them manually.

Fix: #

Add a Linking event listener in your App.js component:

import { Linking } from 'react-native';

class App extends React.Component {
  componentDidMount() {
    Linking.addEventListener('url', this.handleDeepLink);
  }

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

  handleDeepLink = (event) => {
    const { url } = event;
    // Use your NavigationService to navigate to the target screen
    // For nested routes, use the format: 'ParentRoute', { screen: 'ChildRoute' }
    NavigationService.navigate('App', { screen: 'Notifications' });
    
    // If you need to parse dynamic params from the URL, use:
    // const { params } = Linking.parse(url);
    // NavigationService.navigate('App', { screen: 'Notifications', params });
  };

  // ... rest of your render method
}

3. iOS AppDelegate Missing Modern OpenURL Method #

Your current iOS AppDelegate.m only implements the deprecated openURL:sourceApplication:annotation: method. For iOS 9+, you need to add the newer method to handle deep links properly.

Fix: #

Update your AppDelegate.m to include both methods:

#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
  return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}

// Add this for iOS 9+ support
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  return [RCTLinkingManager application:app openURL:url options:options];
}

@end

4. Android Test Command Has Invalid Quotes #

Your Android test command uses Chinese quotation marks around the URL, which will cause adb to fail parsing the deep link.

Fix: #

Replace the quotes with English ones:

adb shell am start -W -a android.intent.action.VIEW -d "esportsdeeplink://app/notifications" com.benji.esportscompetition

5. Verify NavigationService Implementation #

Ensure your NavigationService correctly handles nested navigation. Here's a working implementation for reference:

import { NavigationActions, StackActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

// For resetting the navigation stack if needed
function reset(routeName, params) {
  _navigator.dispatch(
    StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName, params })],
    })
  );
}

export default {
  navigate,
  reset,
  setTopLevelNavigator,
};

After applying these fixes, test your deep links again — both when the app is closed and running in the background. This should resolve the issue of staying on the current page instead of navigating to Notifications.

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