گرفتن Device Unique ID در React Native

سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم چجوری unique ID دیوایس های مختلف رو در React Native بگیریم.هر گوشی موبایل در جهان دارای یک unique ID است که ترکیبی از حروف الفبا و اعداد است.unique ID در بحث هایی مثل ارسال نوتیفیکیشن ، login اپلیکیشن و جلوگیری از نصب همزمان چندین اپلیکیشن در یک گوشی استفاده میشه.هر دو گوشی های android و ios از unique ID پشتیبانی میکنند و ما با استفاده از کتابخانه react-native-device-info عملیات مربوط به گرفتن unique ID رو انجام میدیم.

1.باز کردن دایرکتوری پروژه در Command Prompt / Terminal.

2.اجرای دستور npm install —save react–native–device–info@0.11.0 در دایرکتوری پروژه.

3.بعد از نصب کتابخانه باید دستور react–native link react–native–device–info رو اجرا کنیم.

4.ایمپورت کردن کامپوننت های Platform, StyleSheet, View, Text و TouchableOpacity در پروژه.

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

import React, { Component } from 'react';

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

5.ایمپورت کردن ماژول react-native-device-info با استفاده از یک متغیر به نام DeviceInfo.

varv  DeviceInfo = require('react-native-device-info');

1	varv DeviceInfo = require('react-native-device-info');

6.ایجاد ()constructor در پروژه و تعریف یک State به نام DeviceID .

constructor(){
 
    super();
 
    this.state={
 
      DeviceID : ' '
 
    }
  }

constructor(){

super();

this.state={

DeviceID : ' '

}

7.ایجاد یک تابع به نام ()getDeviceID. درون این تابع ما unique device id رو با استفاده از متد ()DeviceInfo.getUniqueID میگیریم و درون state ذخیره میکنیم.این تابع در رویداد onPress دکمه فراخوانی میکنیم.

getDeviceID=()=>{
 
    var id = DeviceInfo.getUniqueID();
 
    this.setState({
 
      DeviceID : id
     
    })
 
  }

getDeviceID=()=>{

var id = DeviceInfo.getUniqueID();

this.setState({

DeviceID : id

})

}

8.اضافه کردن View در بلاک render’s return و قرار دادن دو کامپوننت Text و TouchableOpacity .

render() {
    
  return (
  
      <View style={styles.MainContainer}>
 
      
          <Text style={{textAlign: 'center', fontSize: 20, marginBottom: 10}}>{this.state.DeviceID}</Text>
 
          
          <TouchableOpacity onPress={this.getDeviceID} activeOpacity={0.5} style={styles.button} >
 
            <Text style={styles.TextStyle}> CLICK HERE TO GET DEVICE UNIQUE ID </Text>
 
          </TouchableOpacity>
 
      
      </View>
            
    );

render() {

return (

<Text style={{textAlign: 'center', fontSize: 20, marginBottom: 10}}>{this.state.DeviceID}</Text>

<Text style={styles.TextStyle}> CLICK HERE TO GET DEVICE UNIQUE ID </Text>

</TouchableOpacity>

</View>

);

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

const styles = StyleSheet.create({
 
 MainContainer :{
 
   justifyContent: 'center',
   alignItems: 'center',
   flex:1,
   paddingTop: (Platform.OS == 'ios' ? 20 : 0)
 
 },
 
 button: {
    
  paddingTop: 10,
  paddingBottom: 10,
  width: '90%',
  backgroundColor: '#4CAF50',
},
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/open-phone-number-in-dial-screen/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/1362070_b9a1_2-300x162.jpg" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">تماس تلفنی در React Native</div></div></div><div class="ctaButton"></div></div></a></div> 
TextStyle:{
    color:'#fff',
    textAlign:'center',
}
 
});

const styles = StyleSheet.create({

MainContainer :{

justifyContent: 'center',

alignItems: 'center',

flex:1,

paddingTop: (Platform.OS == 'ios' ? 20 : )

button: {

paddingTop: 10,

paddingBottom: 10,

width: '90%',

backgroundColor: '#4CAF50',

TextStyle:{

color:'#fff',

textAlign:'center',

}

});

کد کامل برنامه در فایل App.js

import React, { Component } from 'react';
 
import { Platform, StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 
var DeviceInfo = require('react-native-device-info');
 
export default class Myproject extends Component {
 
  constructor(){
 
    super();
 
    this.state={
 
      DeviceID : ' '
 
    }
  }
 
  getDeviceID=()=>{
 
    var id = DeviceInfo.getUniqueID();
 
    this.setState({
 
      DeviceID : id
     
    })
 
  }
 
  render() {
    
  return (
  
      <View style={styles.MainContainer}>
 
      
          <Text style={{textAlign: 'center', fontSize: 20, marginBottom: 10}}>{this.state.DeviceID}</Text>
 
          
          <TouchableOpacity onPress={this.getDeviceID} activeOpacity={0.5} style={styles.button} >
 
            <Text style={styles.TextStyle}> CLICK HERE TO GET DEVICE UNIQUE ID </Text>
 
          </TouchableOpacity>
 
      
      </View>
            
    );
  }
}
 
const styles = StyleSheet.create({
 
 MainContainer :{
 
   justifyContent: 'center',
   alignItems: 'center',
   flex:1,
   paddingTop: (Platform.OS == 'ios' ? 20 : 0)
 
 },
 
 button: {
    
  paddingTop: 10,
  paddingBottom: 10,
  width: '90%',
  backgroundColor: '#4CAF50',
},
 
TextStyle:{
    color:'#fff',
    textAlign:'center',
}
 
});