如何为React Native移动应用注册默认tel URL Schema以实现自定义拨号器

Got it, let's break down how to get your React Native app listed as an option for tel: links on both Android and iOS—since you’ve already ejected from Expo and have full native access, we can jump straight into the platform-specific configs:

Android Configuration #

Step 1: Update AndroidManifest.xml #

You need to add an intent filter to your main activity so Android recognizes your app as a handler for tel: schemes. Open android/app/src/main/AndroidManifest.xml and find the <activity> tag for your MainActivity. Add the following <intent-filter> inside it:

<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="tel" />
</intent-filter>

• android.intent.action.VIEW: Tells Android your app can handle view actions for the scheme.
• DEFAULT category: Ensures your app shows up in the system's app picker when a tel: link is tapped.
• BROWSABLE category: Allows your app to be triggered from browsers or other apps that launch links.
• android:scheme="tel": Registers your app to handle the standard telephone URL scheme.

Step 2: Handle the incoming link in React Native #

Once Android routes the tel: link to your app, you need to extract the phone number and trigger your Twilio call logic. Use React Native's Linking API to listen for incoming URLs:

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

const App = () => {
  useEffect(() => {
    // Handle URL when app is opened from a cold start
    const fetchInitialURL = async () => {
      const initialURL = await Linking.getInitialURL();
      if (initialURL) processTelLink(initialURL);
    };

    // Handle URL when app is already running in the background
    const handleURLChange = ({ url }) => {
      if (url) processTelLink(url);
    };

    // Extract phone number and trigger Twilio call
    const processTelLink = (url) => {
      const phoneNumber = url.replace('tel:', '');
      console.log('Incoming call request for:', phoneNumber);
      // Add your Twilio service integration logic here to initiate the masked call
    };

    fetchInitialURL();
    const urlSubscription = Linking.addEventListener('url', handleURLChange);

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

  // Rest of your app component code
  return (
    // Your app's UI components
  );
};

export default App;

iOS Configuration #

Step 1: Modify Info.plist #

To make iOS recognize your app as a tel: handler, you need to add the scheme to your app's URL types. Open ios/[YourAppName]/Info.plist and add this entry:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>tel</string>
        </array>
    </dict>
</array>

This registers your app to respond to the tel: scheme, so iOS will include it in the app picker when a user taps a telephone link.

Step 2: Update AppDelegate to pass links to React Native #

You need to ensure iOS forwards the incoming tel: link to React Native's Linking system. Depending on whether you're using Objective-C or Swift, update your AppDelegate file:

For Objective-C (AppDelegate.m):

First, import the RCTLinkingManager header at the top:

#import <React/RCTLinkingManager.h>

Then add this method to handle incoming URLs:

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:app openURL:url options:options];
}

For Swift (AppDelegate.swift):

Import React at the top:

import React

Then add this method:

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
  return RCTLinkingManager.application(app, open: url, options: options)
}

Step 3: Handle the link in React Native #

You can reuse the exact same Linking logic from the Android section above—React Native's API works consistently across platforms to extract the phone number and trigger your Twilio integration.

Testing Tips #

• Android: Use the ADB command line to test the link handling:

  adb shell am start -a android.intent.action.VIEW -d tel:+12223334444
  

  You should see a system picker with your app and the default phone app as options.
• iOS: Open Safari and type tel:+12223334444 into the address bar. Tap the link, and iOS will show your app as an option to handle the call.

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