React Native(iOS)新手小白零基礎(chǔ)自學(十一)常用API及其實踐三

1.VibrationIOS
vibrate() :振動提醒一秒,需要真機測試赊豌。

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

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

var app = React.createClass({
  render:function(){
    return(
      <View>
        <Text onPress={this.vibration}
              style={styles.btn}>
          振動一下
        </Text>
      </View>
    );
  },

  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 是傳遞的參數(shù),包括:timeout 指定獲取地理位置信息時的超時時常碘饼,單位為毫秒熙兔。
maximumAge 重復獲取定時時指定多久再次獲取,毫秒艾恼。
enableHighAccuracy 值為true或者false住涉,指定是否要求高精度的位置信息。
2.2.watchPosition(successCallback, errorCallback, GeoOptions):監(jiān)測位置運動钠绍。
2.3.clearWatch(watchID):依據(jù)ID清除監(jiān)測.

var Geolocation = require('Geolocation');

var app = React.createClass({
  render:function(){
    return(
      <View>
        <Text onPress={this.vibration}
              style={styles.btn}>
          獲取位置
        </Text>
      </View>
    );
  },

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

});

3.數(shù)據(jù)請求
1.XMLHttpRequest
2.Fetch
借用官方的一句話:
作為開發(fā)者來說舆声,你通常不應該直接使用XMLHttpRequest,因為它的API用起來非常冗長柳爽。不過這一API的實現(xiàn)完全兼容瀏覽器媳握,因而你可以使用很多npm上已有的第三方庫,例如frisbee或是axios磷脯。(不過我們還是推薦你使用fetch)

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

var App = React.createClass({
  render: function(){
    return(
      <View>
        <Text onPress={this._doXMLHttpRequest} style=
          {styles.btn}>XMLHttpRequest請求數(shù)據(jù)</Text>

        <Text onPress={this._doFetch} style={styles.btn}>Fetch請求數(shù)據(jù)</Text>
      </View>
    );
  },
  _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: 主要用于設(shè)定一個定時任務蛾找,比如打開App5秒后開始獲取用戶的位置信息。
2.setInterval: 主要用于設(shè)定循環(huán)執(zhí)行的任務赵誓,例如輪播圖打毛。
3.setImmediate: 主要用于設(shè)置立即執(zhí)行的任務。

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秒請求百度數(shù)據(jù)
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);

//立即執(zhí)行‘發(fā)送數(shù)據(jù)’
var immediateID = setImmediate(function(){
  console.log('發(fā)送數(shù)據(jù)');
});

5.使用requestAnimationFrame開發(fā)進度條

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(
      <View>
        <View style={css}>
        </View>
      </View>
    );
},
  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);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末俩功,一起剝皮案震驚了整個濱河市隘冲,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌绑雄,老刑警劉巖展辞,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異万牺,居然都是意外死亡罗珍,警方通過查閱死者的電腦和手機洽腺,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來覆旱,“玉大人蘸朋,你說我怎么就攤上這事】鄢” “怎么了藕坯?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長噪沙。 經(jīng)常有香客問我炼彪,道長,這世上最難降的妖魔是什么正歼? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任辐马,我火速辦了婚禮,結(jié)果婚禮上局义,老公的妹妹穿的比我還像新娘喜爷。我一直安慰自己,他們只是感情好萄唇,可當我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布檩帐。 她就那樣靜靜地躺著,像睡著了一般另萤。 火紅的嫁衣襯著肌膚如雪湃密。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天仲墨,我揣著相機與錄音勾缭,去河邊找鬼揍障。 笑死目养,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的毒嫡。 我是一名探鬼主播癌蚁,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼兜畸!你這毒婦竟也來了努释?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤咬摇,失蹤者是張志新(化名)和其女友劉穎伐蒂,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肛鹏,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡逸邦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年恩沛,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缕减。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡雷客,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出桥狡,到底是詐尸還是另有隱情搅裙,我是刑警寧澤,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布裹芝,位于F島的核電站部逮,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏局雄。R本人自食惡果不足惜甥啄,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望炬搭。 院中可真熱鬧蜈漓,春花似錦、人聲如沸宫盔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽灼芭。三九已至有额,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間彼绷,已是汗流浹背巍佑。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留寄悯,地道東北人萤衰。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像猜旬,于是被迫代替她去往敵國和親脆栋。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內(nèi)容