返回 导航

React / React Native

hangge.com

React Native - 使用Vibration API实现设备振动

作者:hangge | 2017-04-25 08:10
有时程序中需要实现这样的功能,当有重要的消息提醒时,我们会发出声音告知用户。而如果用户关闭了声音,那么就可以改用振动来提醒用户。
使用 React Native 提供的 Vibration API,我们可以很方便地让移动设备发生振动效果。

1,效果图

点击界面上的“点击震动”按钮,设备会出现1秒钟的震动效果。
(注意:需要使用真机调试,模拟器没有效果)

2,样例代码

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

//默认应用的容器组件
class App extends Component {
   //渲染
   render() {
      return (
        <View style={styles.container}>
         <Text style={styles.item} onPress={this.vibration.bind(this)}>点击震动</Text>
        </View>
      );
   }

   //点击震动
   vibration() {
      Vibration.vibrate();
   }
 }

//样式定义
const styles = StyleSheet.create({
  container:{
    flex: 1,
    marginTop:25
  },
  item:{
    margin:15,
    height:30,
    borderWidth:1,
    padding:6,
    borderColor:'#ddd',
    textAlign:'center'
  },
});

AppRegistry.registerComponent('ReactDemo', () => App);

评论

全部评论(0)

回到顶部