React Native/Expo深度链接问题求助：配置可传参的应用内分享跳转链接

Hey there! Let’s get those shareable deep links working in your Expo app once and for all—sounds like you’re already halfway there with the code you’ve got. Here’s a step-by-step breakdown to make this solid:

Expo needs to know how to handle your app’s deep links, so start by updating your app.json with a custom scheme and screen mappings:

{
  "expo": {
    "scheme": "mygroupapp", // Pick a unique scheme for your app (no spaces!)
    "linking": {
      "config": {
        "screens": {
          "camera": "camera", // Match the exact screen name you use in navigation
          // Add other screens here if you need them later
        }
      }
    }
    // ... rest of your expo config
  }
}

Don’t forget to restart your Expo dev server after making this change—it won’t take effect otherwise!

You need to listen for incoming deep links (whether the app opens directly from a link or is already running) and handle the navigation + parameter passing. Add this to your root App.js (or wherever your navigation container lives):

import * as Linking from 'expo-linking';
import { useEffect, useRef } from 'react';
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native'; // If using React Navigation

export default function App() {
  // Grab your navigation ref if you're using React Navigation
  const navigationRef = useNavigationContainerRef();

  useEffect(() => {
    // Handle links that opened the app initially
    const checkInitialLink = async () => {
      const initialUrl = await Linking.getInitialURL();
      if (initialUrl) handleDeepLink(initialUrl);
    };

    // Handle links while the app is already running
    const linkSubscription = Linking.addEventListener('url', ({ url }) => {
      handleDeepLink(url);
    });

    checkInitialLink();
    return () => linkSubscription.remove(); // Clean up the listener on unmount
  }, []);

  const handleDeepLink = (url) => {
    const parsedLink = Linking.parse(url);
    const { screen, group_id } = parsedLink.queryParams;

    // Make sure we have valid params before navigating
    if (screen && group_id) {
      // Replace this with your actual navigation logic
      if (navigationRef.isReady()) {
        navigationRef.navigate(screen, { group_id });
      }
      console.log(`Navigating to ${screen} with group ID: ${group_id}`);
    }
  };

  return (
    <NavigationContainer ref={navigationRef}>
      {/* Your navigator and screens go here */}
    </NavigationContainer>
  );
}

Your existing _handleNewGroup function is close—let’s tweak it to work for both dev and production, and make sure parameters are properly passed:

_handleNewGroup = async () => {
  try {
    const group_id = await this.createGroupId();
    let baseUrl;

    // Use exp:// for dev, your custom scheme for production
    if (__DEV__) {
      baseUrl = 'exp://192.168.0.21:19000'; // Double-check your local IP/port!
    } else {
      baseUrl = 'mygroupapp://'; // Match the scheme from app.json
    }

    // Build the full shareable link (encode ID to handle special characters)
    const shareableLink = `${baseUrl}?screen=camera&group_id=${encodeURIComponent(group_id)}`;

    // Optional: Use Expo's Sharing API to let users send the link
    // import * as Sharing from 'expo-sharing';
    // await Sharing.shareAsync(shareableLink);

    // Test it out by opening the link immediately
    await Linking.openURL(shareableLink);
  } catch (error) {
    console.error('Oops, something went wrong generating the link:', error);
  }
};

• Dev Environment: Type your exp:// link directly into your browser (e.g., exp://192.168.0.21:19000?screen=camera&group_id=test123)—it should open your app and jump to the camera screen with the ID.
• Production: When you build your app, test the custom scheme link (e.g., mygroupapp://?screen=camera&group_id=test123)—you can send it via text or email to test opening it from outside the app.

• If links aren’t opening your app: Double-check the scheme in app.json matches what you’re using in your link.
• If parameters aren’t showing up: Log parsedLink in handleDeepLink to make sure the query params are being parsed correctly.
• If navigation isn’t working: Ensure your screen name in the link matches exactly what’s in your navigator.

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