React Native（iOS）新手小白零基础自学（十一）常用API及其实践三

1.VibrationIOS
vibrate() ：振动提醒一秒，需要真机测试。

 var React = require('react-native');

 var {
   AppRegistry,
   StyleSheet,
   View,
   Text,
   VibrationIOS
 } = React;

var app = React.createClass({
  render:function(){
    return(
      
        
          振动一下
        
      
    );
  },

  vibration:function(){
    VibrationIOS.vibrate();
  }
  
});

var styles = StyleSheet.create({
  btn:{
    marginTop:50,
    marginLeft:10,
    marginRight:10,
    height:35,
    backgroundColor:'#3bc1ff',
    color:'#fff',
    lineHeight:24,
    fontWeight:'bold',
    textAlign:'center'
  }
});

AppRegistry.registerComponent('RNOldVersionES5', () => app);

2.Geolocation 位置服务
2.1.getCurrentPosition(successCallback, errorCallback, GeoOptions):用于获取当前位置。
GeoOptions 是传递的参数，包括：timeout 指定获取地理位置信息时的超时时常，单位为毫秒。
maximumAge 重复获取定时时指定多久再次获取，毫秒。
enableHighAccuracy 值为true或者false，指定是否要求高精度的位置信息。
2.2.watchPosition(successCallback, errorCallback, GeoOptions):监测位置运动。
2.3.clearWatch(watchID):依据ID清除监测.

var Geolocation = require('Geolocation');

var app = React.createClass({
  render:function(){
    return(
      
        
          获取位置
        
      
    );
  },

  vibration:function(){
    // VibrationIOS.vibrate();
    Geolocation.getCurrentPosition(function(data){
      alert(JSON.stringify(data));
    },
    function(){
      alert('获取位置失败');
    });
  }

});

3.数据请求
1.XMLHttpRequest
2.Fetch
借用官方的一句话：
作为开发者来说，你通常不应该直接使用XMLHttpRequest，因为它的API用起来非常冗长。不过这一API的实现完全兼容浏览器，因而你可以使用很多npm上已有的第三方库，例如frisbee或是axios。(不过我们还是推荐你使用fetch)

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var App = React.createClass({
  render: function(){
    return(
      
        XMLHttpRequest请求数据

        Fetch请求数据
      
    );
  },
  _doXMLHttpRequest: function(){
    var request = new XMLHttpRequest();
    request.onreadystatechange = (e) => {
      if (request.readyState !== 4) {
        return;
      }

      if (request.status === 200) {
        console.log('success', request.responseText);
      } else {
        console.warn('error');
      }
    };

    request.open('GET', 'http://www.baidu.com/');
    request.send();
  },

  _doFetch: function(){
    fetch('http://www.baidu.com/')
    .then(function(data){
      return data.text();
    })
    .then((responseText) => {
      console.log(responseText);
    })
    .catch((error) => {
      console.warn(error);
    });
  }
});

var styles = StyleSheet.create({
  btn:{
    marginTop:50,
    marginLeft:10,
    marginRight:10,
    height:35,
    backgroundColor:'#3BC1FF',
    color:'#fff',
    lineHeight:24,
    fontWeight:'bold',
    textAlign:'center'
  }
});
AppRegistry.registerComponent('RNOldVersionES5', () => App);

4.定时器
1.setTimeout: 主要用于设定一个定时任务，比如打开App5秒后开始获取用户的位置信息。
2.setInterval: 主要用于设定循环执行的任务，例如轮播图。
3.setImmediate: 主要用于设置立即执行的任务。

var Geolocation = require('Geolocation');

//5秒后获取用户位置
var timeoutID = setTimeout(function () {
  var geo = require('Geolocation');
  geo.getCurrentPosition(function(data){
    alert(JSON.stringify(data));
  },function(e){
    alert(JSON.stringify(e));
  });
  if(timeoutID){
    clearTimeout(timeoutID);
  }
}, 5000);

//每隔5秒请求百度数据
var intervalID = setInterval(function () {
  fetch('http://www.baidu.com/')
    .then(function(data){
      return data.text();
    })
    .then((responseText) => {
      console.log(responseText);
    })
    .catch((error) => {
      console.warn(error);
    });
}, 5000);

//立即执行‘发送数据’
var immediateID = setImmediate(function(){
  console.log('发送数据');
});

5.使用requestAnimationFrame开发进度条

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;
var TimerMixin = require('react-timer-mixin');

var App = React.createClass({
  mixins:[TimerMixin],
  getInitialState:function(){
    return{
      width:10
    };
  },
  render: function(){
    var css = [];
    css.push(styles.progress);
    if(this.state.width){
      css.push({width:this.state.width, marginTop:50});
    }
    return(
      
        
        
      
    );
},
  componentDidMount:function(){
    var _that = this;
    function doAnimated(){
      _that.setState({
        width:_that.state.width + 1
      });
      if(_that.state.width < 290){
        requestAnimationFrame(doAnimated);
      }
    }
    requestAnimationFrame(doAnimated);
  }
});

var styles = StyleSheet.create({
  progress:{
    height:10,
    width:10,
    marginLeft:10,
    backgroundColor:'#e72d00',
    marginTop:10
  },
});
AppRegistry.registerComponent('RNOldVersionES5', () => App);