How to make phone call in React Native?

问题

I want to call to the value of Text component when I press it. But, actually, I haven't enough knowledge for that.

Can you, please, tell me, which library or component should I use?

回答1:

If you look at the source code for react-native-phone-call, it's ultimately just a wrapper for:

import {Linking} from 'react-native'
Linking.openURL(`tel:${phoneNumber}`)

回答2:

You can use this method to call numbers in android and ios, place this method in a utils file and use the method wherever you want. cheers

import { Linking, Alert, Platform } from 'react-native';

export const callNumber = phone => {
  console.log('callNumber ----> ', phone);
  let phoneNumber = phone;
  if (Platform.OS !== 'android') {
    phoneNumber = `telprompt:${phone}`;
  }
  else  {
    phoneNumber = `tel:${phone}`;
  }
  Linking.canOpenURL(phoneNumber)
  .then(supported => {
    if (!supported) {
      Alert.alert('Phone number is not available');
    } else {
      return Linking.openURL(phoneNumber);
    }
  })
  .catch(err => console.log(err));
};

回答3:

it is very simple for ios:

import {Linking} from 'react-native'

<Text onPress={()=>{Linking.openURL('tel:119');}} style={styles.funcNavText}>119</Text>

回答4:

import React, { Component } from "react";
import {Linking,Platform,TouchableOpacity,Text} from "react-native";
export default class MakeCall extends Component {

 dialCall = (number) => {
    let phoneNumber = '';
    if (Platform.OS === 'android') { phoneNumber = `tel:${number}`; }
    else {phoneNumber = `telprompt:${number}`; }
    Linking.openURL(phoneNumber);
 };

 Render(){
        return(
                <TouchableOpacity
                   style={{
                   height: 30,
                   width: 30,
                   backgroundColor: "#329df4",
                   alignItems: "center",
                   justifyContent: "center",
                   borderRadius: 5
                   }}
                 onPress={()=>{this.dialCall(123456789)}}
                >
                <Text>Phone</Text>
                </TouchableOpacity>
              )
  }

}

回答5:

Not a real Answer, but I don't have enough rep to comment.

What about react-native-phone-call or react-native-communications?

回答6:

Simply onPress action with {Linking.openURL(tel:${phonenumber});} can be put

<Text onPress={()=>{Linking.openURL('tel:8777111223');} }>8777111223</Text>

ps:Dont forget to import Linking from 'react-native'

回答7:

1. install react-native-phone-call package using npm

$ npm install --save react-native-phone-call

2. create a method called makeCall()

makeCall = (number) => {
     const args = {
         number: number, // String value with the number to call
         prompt: true // Optional boolean property. Determines if the user should be prompt prior to the call 
     }
    call(args).catch(console.error)
}

3. call the method in onPress event of a TouchableOpacity

<TouchableOpacity key={index} style={{width: '80%', height: 80, backgroundColor: 'rgb(186, 186, 186)',  alignItems:'center', justifyContent: 'space-between', borderBottomWidth: 0.5, borderBottomColor: '#000000'}}
             onPress={()=> this.makeCall(item.contactNumber)}
>

回答8:

On android, react-native-send-intent is great to dial a phone number without opening android dialer app.

On iOS, use the openUrl method which do (almost) the same.

回答9:

An example:

<ButtonOrange onPress={() => { Linking.openURL(`tel:999990000`) }}>
                            <ViewCenter>
                                <Icon name="phone" size={18} color="#fff" />
                                <ButtonText>Call</ButtonText>
                            </ViewCenter>
                        </ButtonOrange>

来源：https://stackoverflow.com/questions/51545064/how-to-make-phone-call-in-react-native

标签

react-native

phone-call