Phone number validation reactJavascript call phone numberOpen phone dialer using JavaScriptTwilio client Reactbrowser-dialer-reactHow to get phone number in react-nativeReact-native-immediate-phone-call exampleHow to make a calling app in React nativeExample to Make a Phone Call in React Native App
文章推薦指數： 80 %
App.js
Skiptocontent
Menu
Menu
Contents1ReactNative PhoneCalls2HowtoMakeaPhoneCallinReactNative?3ToMakeaReactNativeApp4InstallationofDependency5CodetoMakeaPhoneCalls5.1App.js6KnownIssueforiOS7ToRunthe ReactNativeApp8OutputScreenshots8.1Android8.2IOS9OutputinOnlineEmulator
ReactNative PhoneCalls
HereisanExampletoMakeaPhoneCallinReactNativeApp.TomakeaPhoneCallfromReactNativeAppwewilluse react-native-phone-call.Withthehelpofthis example,Youcanprovideonetabcallfeaturetotheusersofyourapplication.
Youcanalsovisit MakePhoneCall,SendSMSorEmailUsingReactNativeCommunication using react-native-communicationstomakePhoneCalls,SendTextSMS,SendEmailandOpenaURLinBrowser.
HowtoMakeaPhoneCallinReactNative?
consttriggerCall=()=>{
//Checkforperfect10digitlength
if(inputValue.length!=10){
alert('Pleaseinsertcorrectcontactnumber');
return;
}
constargs={
number:inputValue,
prompt:true,
};
//Makeacall
call(args).catch(console.error);
};
InthisexampleofmakingaCallfromReactNativeApp,wewillopenthecontactnumberonaclickofabuttoninthedialertocalldirectlyusingacall(args) providedby react-native-phone-call. Solet’sgetstarted.
ToMakeaReactNativeApp
GettingstartedwithReactNativewillhelpyoutoknowmoreaboutthewayyoucanmakeaReactNativeproject.Wearegoingtousereact-nativeinittomakeourReactNativeApp.Assumingthatyouhavenodeinstalled,youcanusenpmtoinstallthereact-native-clicommandlineutility.Opentheterminalandgototheworkspaceandrun
npminstall-greact-native-cli
RunthefollowingcommandstocreateanewReactNativeproject
react-nativeinitProjectName
IfyouwanttostartanewprojectwithaspecificReactNativeversion,youcanusethe--versionargument:
react-nativeinitProjectName--versionX.XX.X
react-nativeinitProjectName--versionreact-native@next
ThiswillmakeaprojectstructurewithanindexfilenamedApp.jsinyourprojectdirectory.
InstallationofDependency
Tousecallwehavetoinstallreact-native-phone-call package.
Toinstallthisopentheterminalandjumpintoyourproject
cdProjectName
Runthefollowingcommand
npminstallreact-native-phone-call--save
Thiscommandwillcopyallthedependenciesintoyournode_moduledirectory.–saveisoptional,itisjusttoupdatethereact-native-phone-calldependencyinyourpackage.jsonfile.
CodetoMakeaPhoneCalls
NowOpenApp.jsinanycodeeditorandreplacethecodewiththefollowingcode
App.js
//ExampletoMakeaPhoneCallinReactNativeApp
//https://aboutreact.com/example-to-make-a-call-from-the-react-native-app/
//importReactinourcode
importReact,{useState}from'react';
//importallthecomponentswearegoingtouse
import{
SafeAreaView,
StyleSheet,
View,
Text,
TouchableOpacity,
TextInput,
}from'react-native';
//importCallAPI
importcallfrom'react-native-phone-call';
constApp=()=>{
const[inputValue,setInputValue]=useState('9999999999');
consttriggerCall=()=>{
//Checkforperfect10digitlength
if(inputValue.length!=10){
alert('Pleaseinsertcorrectcontactnumber');
return;
}
constargs={
number:inputValue,
prompt:true,
};
//Makeacall
call(args).catch(console.error);
};
return(
延伸文章資訊
- 1React.js make a phone call with a tag is not working
i've simply tried a tag it is supposed to make a phone call when it's pressed does anyone know wh...
- 2React Native CallKeep - GitHub
On an incoming call, from react native, call RNCallKeep. ... ConnectionService that the device is...
- 3Example to Make a Phone Call in React Native App
App.js
- 4react-native-phone-call - npm
Initiate a phone call in React Native. ... Start using react-native-phone-call in your project by...
- 5make phone number clickable react Code Example
