آموزش react native - ارسال sms(پیامک) از طریق اپلیکیشن

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 باز کنیم و دستور زیر رو اجرا کنیم.

npm install react-native-sms --save

1	npm install react-native-sms --save

2. بعد از اینکه کتابخونه با موفقیت نصب شد اگر نسخه React Native شما 60 یا بالاتر هست نیاز به اجرای دستور link کتابخونه نیست در غیر اینصورت باید دستور زیر رو برای لینک کردن کتابخونه به پروژه اجرا کنید.

react-native link react-native-sms

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 نیاز به تنظیمات خاصی نیست.

<uses-permission android:name="android.permission.READ_SMS"/>

1	<uses-permission android:name="android.permission.READ_SMS"/>

کد کامل AndroidManifest.xml بعد از تغییرات:

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

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

</intent-filter>

</activity>

</application>

</manifest>

4. فایل APP.js رو باز کنید و کامپوننت های Alert, StyleSheet, Text, View و TouchableOpacity رو ایمپورت کنید.

import React, {Component} from 'react';
 
import { Alert, StyleSheet, Text, View, TouchableOpacity } from 'react-native';

import React, {Component} from 'react';

import { Alert, StyleSheet, Text, View, TouchableOpacity } from 'react-native';

5.ایمپورت SendSMS از کتابخونه react-native-sms

import SendSMS from 'react-native-sms'

1	import SendSMS from 'react-native-sms'

6. ایجاد یک تابع به نام ()smsSendFunction در کلاس App.درون این تابع ما ({})SendSMS.send رو فراخوانی میکنیم.در این method ما متن sms، شماره گیرنده و پیغام های موفقیت، شکست و لغو کردن رو مشخص میکنیم.

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

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 .

ایجاد Alert Dialog در react native

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

render() {

return (

<TouchableOpacity

onPress={this.smsSendFunction}

activeOpacity={0.6}

style={styles.button} >

Click Here To Send SMS

</Text>

</TouchableOpacity>

</View>

);

}

8. ایجاد استایل سفارشی.

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

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

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