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 در پروژه.
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Vibration, Button } from 'react-native' |
2.دو تا متغیر ثابت به نام DURATION و PATTERN تعریف میکنیم.
1 2 |
const DURATION = 10000 ; const PATTERN = [ 1000, 2000, 3000, 4000] ; |
3.ایجاد یک تابع به نام StartVibrationFunction.درون این تابع ما vibration رو با استفاده از ()Vibration.vibrate شروع میکنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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.
1 2 3 4 5 6 7 |
StopVibrationFunction=()=>{ // Stop Vibration. Vibration.cancel(); } |
5.اضافه کردن کامپوننت View درون بلاک render’s return.
1 2 3 4 5 6 7 8 9 10 11 12 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
6.ما به دو تا button برای فراخوانی ()StartVibrationFunction و ()StopVibrationFunction نیاز داریم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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> ); } |
7.ایجاد استایل سفارشی
1 2 3 4 5 6 7 8 9 10 11 |
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 10 } }); |
8.کد کامل برنامه در فایل 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 67 68 69 70 71 72 73 74 |
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 } }); |
اسکرین شات در اپلیکیشن Android:
دیدگاهتان را بنویسید