Vibration در react native

سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم چجوری Vibration در React Native رو فعال کنیم.زمانی که قطعه کوچیک مربوط به Vibration شروع به لرزش میکنه،بعد از مدت کوتاهی کل گوشی شروع به لرزش میکنه.در این آموزش ما یک اپلیکیشن React Native با استفاده از کامپوننت Vibration ایجاد میکنیم که با استفاده از یک دکمه شروع و قطع میشه.

توجه کنید: در شبیه سازهای Android و Ios این کامپوننت پشتیبانی نمیشه،بنابراین شما باید از یک دیوایس واقعی برای تست استفاده کنید(چگونه برنامه های React Native رو روی موبایل تست و اجرا کنیم).

پیکربندی Vibration در Android:

فایل AndroidManifest.xml رو از مسیر YourProjectName -> android -> app -> src -> main باز کنید.
permission روبرو رو به فایل اضافه کنید.<uses–permission android:name=“android.permission.VIBRATE”/>

1.ایمپورت کردن کامپوننت های StyleSheet, View, Vibration و Button در پروژه.

import React, { Component } from 'react';
 
import { StyleSheet, View, Vibration, Button } from 'react-native'

import React, { Component } from 'react';

import { StyleSheet, View, Vibration, Button } from 'react-native'

2.دو تا متغیر ثابت به نام DURATION و PATTERN تعریف میکنیم.

const DURATION = 10000 ;
const PATTERN = [ 1000, 2000, 3000, 4000] ;

1 2	const DURATION = 10000 ; const PATTERN = [ 1000, 2000, 3000, 4000] ;

3.ایجاد یک تابع به نام StartVibrationFunction.درون این تابع ما vibration رو با استفاده از ()Vibration.vibrate شروع میکنیم.

StartVibrationFunction=()=>{
 
    // Device Will Vibrate for 10 seconds.
    Vibration.vibrate(DURATION) ;
 
    // Android Device Will Vibrate in pattern : Wait 1sec -> vibrate 2sec -> wait 3sec.
    // iOS Device Will Vibrate in pattern : Wait 1sec -> Vibrate -> wait 2sec -> Vibrate -> wait 3sec -> Vibrate
    
    // Vibration.vibrate(PATTERN)
 
 
    // Android Device Will Vibrate in above pattern Infinite Time.
    // iOS Device Will Vibrate in above pattern Infinite Time.
    
    // Vibration.vibrate(PATTERN, true)
 
  }

StartVibrationFunction=()=>{

// Device Will Vibrate for 10 seconds.

Vibration.vibrate(DURATION) ;

// Android Device Will Vibrate in pattern : Wait 1sec -> vibrate 2sec -> wait 3sec.

// iOS Device Will Vibrate in pattern : Wait 1sec -> Vibrate -> wait 2sec -> Vibrate -> wait 3sec -> Vibrate

// Vibration.vibrate(PATTERN)

// Android Device Will Vibrate in above pattern Infinite Time.

// iOS Device Will Vibrate in above pattern Infinite Time.

// Vibration.vibrate(PATTERN, true)

}

4.ایجاد یک تابع به نام ()StopVibrationFunction برای قطع Vibration.

StopVibrationFunction=()=>{
    
    // Stop Vibration.
    Vibration.cancel();
 
 
  }

StopVibrationFunction=()=>{

// Stop Vibration.

Vibration.cancel();

}

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

render() {
  
  return (
 
    <View style={styles.MainContainer}>
 
        
 
    </View>
           
   );
 }

render() {

return (

</View>

);

}

6.ما به دو تا button برای فراخوانی ()StartVibrationFunction و ()StopVibrationFunction نیاز داریم.

render() {
  
  return (
 
    <View style={styles.MainContainer}>
 
        <View style={{margin: 10}}>
          
            <Button title = " Start Vibration " onPress = {this.StartVibrationFunction} />
 
        </View>
        
        <View style={{margin: 10}}>
 
            <Button title = " Stop Vibration " onPress = {this.StopVibrationFunction} />
 
        </View>
 
 
    </View>
           
   );
 }

render() {

return (

</View>

</View>

);

}

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

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

const styles = StyleSheet.create({
 
 MainContainer :{
 
   justifyContent: 'center',
   flex:1,
   margin: 10
 }
 
 
});

const styles = StyleSheet.create({

MainContainer :{

justifyContent: 'center',

flex:1,

margin: 10

}

});

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

import React, { Component } from 'react';
 
import { StyleSheet, View, Vibration, Button } from 'react-native'
 
const DURATION = 10000 ;
 
const PATTERN = [ 1000, 2000, 3000, 4000] ;
 
export default class Mynewproject extends Component {
 
 
  StartVibrationFunction=()=>{
 
    // Device Will Vibrate for 10 seconds.
    Vibration.vibrate(DURATION) ;
 
    // Android Device Will Vibrate in pattern : Wait 1sec -> vibrate 2sec -> wait 3sec.
    // iOS Device Will Vibrate in pattern : Wait 1sec -> Vibrate -> wait 2sec -> Vibrate -> wait 3sec -> Vibrate
    
    // Vibration.vibrate(PATTERN)
 
 
    // Android Device Will Vibrate in above pattern Infinite Time.
    // iOS Device Will Vibrate in above pattern Infinite Time.
    
    // Vibration.vibrate(PATTERN, true)
 
  }
 
  StopVibrationFunction=()=>{
    
    // Stop Vibration.
    Vibration.cancel();
 
 
  }
 
 
render() {
  
  return (
 
    <View style={styles.MainContainer}>
 
        <View style={{margin: 10}}>
          
            <Button title = " Start Vibration " onPress = {this.StartVibrationFunction} />
 
        </View>
        
        <View style={{margin: 10}}>
 
            <Button title = " Stop Vibration " onPress = {this.StopVibrationFunction} />
 
        </View>
 
 
    </View>
           
   );
 }
}
 
const styles = StyleSheet.create({
 
 MainContainer :{
 
   justifyContent: 'center',
   flex:1,
   margin: 10
 }
 
 
});

import React, { Component } from 'react';

import { StyleSheet, View, Vibration, Button } from 'react-native'

const DURATION = 10000 ;

const PATTERN = [ 1000, 2000, 3000, 4000] ;

export default class Mynewproject extends Component {

StartVibrationFunction=()=>{

// Device Will Vibrate for 10 seconds.

Vibration.vibrate(DURATION) ;

// Android Device Will Vibrate in pattern : Wait 1sec -> vibrate 2sec -> wait 3sec.

// iOS Device Will Vibrate in pattern : Wait 1sec -> Vibrate -> wait 2sec -> Vibrate -> wait 3sec -> Vibrate

// Vibration.vibrate(PATTERN)

// Android Device Will Vibrate in above pattern Infinite Time.

// iOS Device Will Vibrate in above pattern Infinite Time.

// Vibration.vibrate(PATTERN, true)

}

StopVibrationFunction=()=>{

// Stop Vibration.

Vibration.cancel();

}

render() {

return (

</View>

</View>

);

}

const styles = StyleSheet.create({

MainContainer :{

justifyContent: 'center',

flex:1,

margin: 10

}

});

اسکرین شات در اپلیکیشن Android:

Vibration در react native

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

دیدگاهتان را بنویسید لغو پاسخ