在现有原生Android应用中注册React Native功能及配置URL Schema回调咨询

Hey there! Let's walk through the cleanest, most maintainable way to set up a callback URL schema that lets your React Native feature (Package2) interact with your native Android app (Package1), building on your existing deep link setup.

1. Define a Unique Callback URL Schema #

First, pick a app-specific, unique URL schema to avoid conflicts with other apps. For example, if your app is named "MyApp", use something like myapp-rn-callback:// — this will be the schema your native app exposes for RN to trigger callbacks, or for your native app to send data back to RN.

Register the Schema in AndroidManifest.xml (Package1) #

Add an intent filter to the Activity that will handle the callback (this can be your existing main activity, or a dedicated callback handler activity for better separation):

<activity
    android:name=".RNCallbackHandlerActivity"
    android:exported="true"> <!-- Required for Android 12+ -->
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        
        <!-- Your unique callback schema -->
        <data
            android:scheme="myapp-rn-callback"
            android:host="callback" /> <!-- Optional: add host/path for more granular control -->
    </intent-filter>
</activity>

Note: Using a dedicated RNCallbackHandlerActivity keeps your main activity logic clean, especially if you have multiple callback scenarios.

2. Handle Callback Logic in Native Android (Package1) #

In your RNCallbackHandlerActivity (or target activity), parse the incoming deep link to extract data and trigger the appropriate native logic, then send a response back to RN if needed.

Example Activity Code #

class RNCallbackHandlerActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        handleIncomingCallback(intent)
        finish() // Close the activity immediately if it's just a handler
    }

    override fun onNewIntent(intent: Intent?) {
        super.onNewIntent(intent)
        intent?.let { handleIncomingCallback(it) }
    }

    private fun handleIncomingCallback(intent: Intent) {
        val data = intent.data ?: return
        
        // Extract parameters from the deep link (e.g., action, result, payload)
        val action = data.getQueryParameter("action")
        val result = data.getQueryParameter("result")
        val payload = data.getQueryParameter("payload")

        // Execute native logic based on the callback action
        when (action) {
            "payment_completed" -> handlePaymentResult(result, payload)
            "profile_updated" -> syncProfileData(payload)
            // Add other callback actions as needed
        }

        // Optional: Send a response back to RN using RN's Linking module
        // You can trigger a deep link to RN's schema here if needed
        sendResponseToRN("callback_processed", "success")
    }

    private fun sendResponseToRN(action: String, status: String) {
        // Assuming RN has registered its own schema like `myapp-rn://`
        val rnDeepLink = "myapp-rn://callback-response?action=$action&status=$status"
        val intent = Intent(Intent.ACTION_VIEW, Uri.parse(rnDeepLink))
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
        startActivity(intent)
    }
}

3. Integrate with React Native Feature (Package2) #

Now, set up RN to trigger the native callback schema, and handle any responses from the native app.

Trigger Native Callback from RN #

Use RN's Linking module to open the native callback schema with parameters:

import { Linking } from 'react-native';

// Example: Trigger a payment completed callback to native app
const triggerNativeCallback = async () => {
  const callbackUrl = 'myapp-rn-callback://callback?action=payment_completed&result=success&payload={"transactionId":"12345"}';
  
  try {
    const supported = await Linking.canOpenURL(callbackUrl);
    if (supported) {
      await Linking.openURL(callbackUrl);
    } else {
      console.error("Callback URL not supported by the native app");
    }
  } catch (error) {
    console.error("Error triggering native callback:", error);
  }
};

Handle Native Responses in RN #

If your native app sends responses back to RN, register RN's own URL schema and handle incoming deep links:

Step 1: Register RN Schema in AndroidManifest.xml (Package1, for RN's activity)

<activity
    android:name=".MainReactActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        
        <data
            android:scheme="myapp-rn"
            android:host="callback-response" />
    </intent-filter>
</activity>

Step 2: Handle Deep Links in RN

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

useEffect(() => {
  const handleDeepLink = (event) => {
    const url = event.url;
    const parsedUrl = new URL(url);
    
    // Extract response parameters
    const action = parsedUrl.searchParams.get('action');
    const status = parsedUrl.searchParams.get('status');
    
    // Handle the response based on action
    if (action === 'callback_processed') {
      if (status === 'success') {
        console.log("Native callback processed successfully");
        // Update RN UI or state accordingly
      } else {
        console.error("Native callback failed");
      }
    }
  };

  // Subscribe to deep link events
  const subscription = Linking.addEventListener('url', handleDeepLink);
  
  // Check for initial deep link (if app was opened via deep link)
  Linking.getInitialURL().then((url) => {
    if (url) handleDeepLink({ url });
  });

  return () => subscription.remove();
}, []);

4. Best Practices for Maintainability #

• Use constants for schemas/hosts: Define your URL schemas, hosts, and action strings as constants in both native (e.g., BuildConfig in Android) and RN code to avoid typos and make updates easier.
  • Example in Android: BuildConfig.RN_CALLBACK_SCHEME = "myapp-rn-callback"
  • Example in RN: export const RN_CALLBACK_SCHEME = 'myapp-rn-callback';
• Validate deep link parameters: Always validate and sanitize incoming parameters in both native and RN to prevent security issues.
• Test edge cases: Test scenarios like app not running, app in background, invalid parameters, etc., to ensure robust behavior.
• Consider using a bridge module: For complex interactions, instead of relying solely on deep links, create a native RN bridge module that exposes callback methods directly — this is more type-safe and avoids parsing URL parameters. However, deep links are great for simple, cross-platform callbacks.

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