如何在 React Native 中调用 phone？

Question

我想在按下时调用Text组件的值。但是，实际上，我没有足够的知识。

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

Answer 1

如果您查看 react-native-phone-call 的源代码，它最终只是一个包装器：

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

Answer 2

您可以使用此方法调用android和ios中的号码，将此方法放在一个utils文件中，然后在您需要的任何地方使用该方法。干杯

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));
};

**更新（Andrey Patseiko 的评论）**

别忘了添加到Info.plist ->

<key>LSApplicationQueriesSchemes</key> 
<array> 
  <string>tel</string> 
  <string>telprompt</string> 
</array>

Answer 3

ios很简单:

import {Linking} from 'react-native'

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

Answer 4

1.使用 npm

安装 react-native-phone-call 包

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

2。创建一个名为 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。在 TouchableOpacity

的 onPress 事件中调用方法

<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)}
>

Answer 5

简单的 onPress 动作与 {Linking.openURL(tel:${phonenumber});} 可以放

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

ps：不要忘记从 'react-native'

导入链接

Answer 6

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>
              )
  }

}

Answer 7

在 android 上，react-native-send-intent 非常适合在不打开 android 拨号器应用程序的情况下拨打 phone 号码。

在 iOS 上，使用 openUrl 方法（几乎）相同。

Answer 8

一个例子：

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

Answer 9

最简单的实现方式如下

import { Linking } from "react-native";

Linking.openURL(`tel:${phoneNumber}`);

Answer 10

import { View,Linking,Text, Image,Platform,TouchableOpacity } from 'react-native';

 const onPressMobileNumberClick = (number) => {

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

 <TouchableOpacity 
       onPress={() => { onPressMobileNumberClick("9211886204") }} >
       <Text style={{ textDecorationLine: 'underline', textAlign: 'center', }>
               {"9211886204"}
       </Text>
   </TouchableOpacity>

如何在 React Native 中调用 phone？

How to make phone call in React Native?

phone-call

react-native