RN实现手机摇一摇功能

在手机app开发过程中很多设计中有摇一摇按钮，RN中实现摇一摇功能用到组件react-native-shake-event

$ npm install react-native-shake-event --save

官网API只给出了npm install 但是我在项目中使用时要在link一下才能起作用

react-native link react-native-shake-event

componentDidMount = () => {组件渲染完后添加摇动事件

RNShakeEvent.addEventListener('shake', () => {

// alert('Device shake!');//判断插件是否起作用

this.setState({

sceneSee: false,//判断是否摇动完毕

shakeBegain: true //提示加载中

})

setTimeout(() => {

this.setState({

sceneSee: true

})

}, 3000)//摇动3秒后变为true

});

}

componentWillMount() {

RNShakeEvent.removeEventListener('shake');//页面加载时移除摇一摇

}

//根据sceneSee和shakeBagain在render中显示不通的内容

RN实现手机摇一摇功能相关推荐

iOS 手机摇一摇功能
调用手机摇一摇功能其实很简单,在你调用的控制器的 viewDidLoad方法里调用 [UIApplication sharedApplication].applicationSupportsShake ...
php用手机摇一摇,H5做出手机摇一摇功能的实现步骤
今天教大家用HTML5来在网页里实现一个很炫酷的功能,手机摇一摇.如果你之前做过手机端的开发,可能对于这样的功能非常了解.但是下面,我们将在Web上首次实现这个功能. 方向事件deviceorient ...
Android手机摇一摇功能的简单实现
我需要做一个Android摇一摇的功能,网上我看了很多教程,都写的大同小异,很多了,最近慕课网上也有关于开发摇一摇教程的视屏,讲的很详细,可惜中间视屏少了两节! SensorManager :获取传感 ...
用HTML5实现手机摇一摇的功能并配上声音
一.用HTML5实现手机摇一摇的功能并配上声音 HTML5的一个重要特性:DeviceOrientation,他将底层的方向传感器和运动传感器进行了高级封装,提供DOM事件支持. DeviceOrie ...
【Android App】物联网中查看手机支持的传感器及实现摇一摇功能-加速度传感器（附源码和演示超详细）
需要源码请点赞关注收藏后评论区留言~~~ 一.传感器的种类传感器Sensor是一系列感应器的总称,是Android设备用来感知周围环境和运动信息的工具. 因为具体的感应信息依赖于相关硬件,所以虽然A ...
利用html5实现类似微信的手机摇一摇功能
利用html5实现类似微信的手机摇一摇功能,并播放音乐. 1. deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2 ...
隐藏与显现_手机键盘摇一摇，隐藏功能立马显现，太棒了
手机是我们每天都要用的,但如果我们把手机键盘给它摇一摇,它会有什么什么的作用呢?一起来看看吧! 第一个就是我们平时打字的时候,我们会打很多的字发给对方,如果突然间后悔了那么多的字,如果我们按删除键的话 ...
手机摇一摇功能音量大小跟系统音量一致
源代码免费下载布局文文件:main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLa ...
利用html5实现类似微信的手机摇一摇功能-计算摇动次数
1. deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2. deviceMotion:封装了运动传感器数据的事件 ...
Androidstudio实现手机摇一摇功能
二话不说直接开车: import android.content.Intent; import android.hardware.Sensor; import android.hardware.Sen ...

RN实现手机摇一摇功能

RN实现手机摇一摇功能相关推荐

最新文章

热门文章