Android React Native中自定义URL Scheme无法正常工作的问题

Hey there! Let's work through fixing your deep link problem step by step. From the code you shared, the main gaps are an incomplete Android Manifest configuration and a rigid URL check in your WebView listener. Here's how to get it working:

1. Fix the Android Manifest Intent-Filter #

Your current intent-filter is cut off, which is almost certainly why the scheme isn't registering properly. Update your AndroidManifest.xml (located at android/app/src/main/) with this full intent-filter inside your main <activity> tag:

<intent-filter android:label="My Custom Scheme">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- Maps your custom scheme and host to this activity -->
    <data
        android:scheme="myschemeapp"
        android:host="addHost" />
</intent-filter>

• action.VIEW: Tells Android this activity can handle link-opening actions
• category.DEFAULT: Makes the activity accessible from the system launcher
• category.BROWSABLE: Allows browsers and WebViews to trigger your app via this scheme
• The data tag explicitly links your myschemeapp:// scheme and addHost host to your app's activity.

2. Improve the WebView Navigation Listener #

Your current code checks for an exact URL match, which will fail if query parameters change (like query=def instead of abc). Instead, parse the URL to validate the scheme and host dynamically. Update your onNavigationStateChange method:

onNavigationStateChange(event) {
  try {
    const url = new URL(event.url);
    // Validate the custom scheme and target host
    if (url.protocol === 'myschemeapp:' && url.host === 'addHost') {
      // Access query parameters if needed
      const queryParam = url.searchParams.get('query');
      alert(`Success! Query parameter: ${queryParam}`);
    } else {
      // Only alert for non-web URLs (avoid spamming for regular page loads)
      if (!event.url.startsWith('http')) {
        alert('Unsupported URL scheme');
      }
    }
  } catch (e) {
    console.error('Failed to parse URL:', e);
  }
}

This approach is far more robust and handles any valid query parameters under your custom scheme.

3. Test the Deep Link Correctly #

Make sure you're testing the link the right way:

• Direct adb test (Android): Run this terminal command to trigger the deep link directly:

  adb shell am start -W -a android.intent.action.VIEW -d "myschemeapp://addHost?query=abc" com.your.app.package
  

  Replace com.your.app.package with your app's actual package name (found in AndroidManifest.xml).
• WebView content check: Ensure the link in your web content uses the correct format:

  <a href="myschemeapp://addHost?query=abc">Trigger Deep Link</a>
  

• WebView URL override: If the link isn't triggering your listener, add the shouldOverrideUrlLoading prop to your WebView to let custom schemes pass through:

  <WebView
    ref="webViewAndroidSample"
    onNavigationStateChange={this.onNavigationStateChange}
    source={{uri:SITE_URL}}
    style={{flex: 1}}
    shouldOverrideUrlLoading={(request) => {
      // Let our listener handle custom schemes
      if (request.url.startsWith('myschemeapp://')) {
        return false;
      }
      // Load regular web URLs normally
      return true;
    }}
  />
  

4. Extra Checks #

• Rebuild the app: After updating the Manifest, run npx react-native run-android to apply the changes (Manifest edits don't take effect with hot reloading).
• Older RN versions: If you're using React Native pre-0.60, add this method to your MainActivity.java to forward deep link intents to React Native:

  @Override
  public void onNewIntent(Intent intent) {
      super.onNewIntent(intent);
      setIntent(intent);
      getReactInstanceManager().onNewIntent(intent);
  }
  

Give these steps a shot, and your custom URL scheme should start working as expected!

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