ارسال sms از طریق اپلیکیشن در react native


sms یکی از قدیمی ترین روش های انتقال پیام به صورت متنی است که از زمان تولد تلفن های همراه وجود داره.sms برای ارسال یک پیام کوتاه بین دو تلفن همراه مورد استفاده قرار می گیرد.React Native به ما اجازه نمیده که در background پیامک ارسال کنیم اما ما میتوانیم متن sms و شماره همراه گیرنده رو به برنامه پیش فرض تلفن همراه بفرستیم و از طریق برنامه پیش فرض پیامک رو ارسال کنیم.در این مقاله ما از کتابخونه react-native-sms برای ارسال sms در React Native استفاده میکنیم که یک کتابخونه پرطرفدار بین برنامه نویسان React Native با هفته ای 6000 نصب است.
البته ما میتونیم یک ماژول native به پروژه اضافه کنیم و به صورت مستقیم sms ارسال کنیم که قبلا در موردش در مقاله ارسال sms به صورت مستقیم در React native بحث کردیم.
* اگر قصد یادگیری react native (ری اکت نیتیو) به صورت حرفه ای و تخصصی رو دارید، پیشنهاد میکنم آموزش جامع و پروزه محور react native رو مشاهده کنید.
1. کتابخونه react-native-sms در هسته react native وجود داره و ما باید اون رو نصب کنیم.برای نصب این کتابخونه باید دایرکتوری پروژه رو در Command Prompt یا Terminal باز کنیم و دستور زیر رو اجرا کنیم.
1 |
npm install react-native-sms --save |
2. بعد از اینکه کتابخونه با موفقیت نصب شد اگر نسخه React Native شما 60 یا بالاتر هست نیاز به اجرای دستور link کتابخونه نیست در غیر اینصورت باید دستور زیر رو برای لینک کردن کتابخونه به پروژه اجرا کنید.
1 |
react-native link react-native-sms |
3.در این مرحله باید READ_SMS permission رو در Andoid اضافه کنیم.این permission به ما امکان خواندن و ارسال پیام کوتاه از دستگاه اندرویدی را می دهد.بنابراین فایل AndroidManifest.xml رو در مسیر Your_React_Native_Project -> android -> app -> src -> main باز کنید و SMS permission رو قرار بدید.برای IOS نیاز به تنظیمات خاصی نیست.
1 |
<uses-permission android:name="android.permission.READ_SMS"/> |
کد کامل AndroidManifest.xml بعد از تغییرات:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.project"> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.READ_SMS"/> <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:windowSoftInputMode="adjustResize"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> </application> </manifest> |
4. فایل APP.js رو باز کنید و کامپوننت های Alert, StyleSheet, Text, View و TouchableOpacity رو ایمپورت کنید.
1 2 3 |
import React, {Component} from 'react'; import { Alert, StyleSheet, Text, View, TouchableOpacity } from 'react-native'; |
5.ایمپورت SendSMS از کتابخونه react-native-sms
1 |
import SendSMS from 'react-native-sms' |
6. ایجاد یک تابع به نام ()smsSendFunction در کلاس App.درون این تابع ما ({})SendSMS.send رو فراخوانی میکنیم.در این method ما متن sms، شماره گیرنده و پیغام های موفقیت، شکست و لغو کردن رو مشخص میکنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
smsSendFunction() { SendSMS.send({ body: 'Please follow us on https://reactapp.ir', recipients: ['0987654321'], successTypes: ['sent', 'queued'] }, (completed, cancelled, error) => { if(completed){ Alert.alert('SMS Sent Successfully.') }else if(cancelled){ console.log('SMS Sent Cancelled.'); }else if(error){ console.log('Some error occured.'); } }); } |
7.ایجاد یک Button به وسیله Touchable Opacity در بلاک render’s return و فراخوانی تابع smsSendFunction در رویداد onPress .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
render() { return ( <View style={styles.MainContainer}> <TouchableOpacity onPress={this.smsSendFunction} activeOpacity={0.6} style={styles.button} > <Text style={styles.TextStyle}> Click Here To Send SMS </Text> </TouchableOpacity> </View> ); } |
8. ایجاد استایل سفارشی.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }, button: { width: '100%', paddingTop:12, paddingBottom:12, backgroundColor: '#00BCD4', borderRadius:7, }, TextStyle:{ color:'#fff', textAlign:'center', fontSize: 20 } }); |
9. کد کامل برنامه در فایل App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
import React, {Component} from 'react'; import { Alert, StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import SendSMS from 'react-native-sms' export default class App extends Component { smsSendFunction() { SendSMS.send({ body: 'Please follow us on https://reactapp.ir', recipients: ['0987654321'], successTypes: ['sent', 'queued'] }, (completed, cancelled, error) => { if(completed){ Alert.alert('SMS Sent Successfully.') }else if(cancelled){ console.log('SMS Sent Cancelled.'); }else if(error){ console.log('Some error occured.'); } }); } render() { return ( <View style={styles.MainContainer}> <TouchableOpacity onPress={this.smsSendFunction} activeOpacity={0.6} style={styles.button} > <Text style={styles.TextStyle}> Click Here To Send SMS </Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }, button: { width: '100%', paddingTop:12, paddingBottom:12, backgroundColor: '#00BCD4', borderRadius:7, }, TextStyle:{ color:'#fff', textAlign:'center', fontSize: 20 } }); |
دیدگاهتان را بنویسید