來自

大部分的app都需要進行網(wǎng)絡(luò)連接,通過網(wǎng)絡(luò)獲取服務(wù)器的數(shù)據(jù),然后更新app的界面展示內(nèi)容,React-Native自然擁有網(wǎng)絡(luò)的相關(guān)操作.官方文檔
fetch
fetch('https://mywebsite.com/endpoint/')

自定義請求的方法,請求頭,請求體

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

異步
使用then

fetch('https://mywebsite.com/endpoint.php')
  .then((response) => response.text())
  .then((responseText) => {
    console.log(responseText);
  })
  .catch((error) => {
    console.warn(error);
  });

使用 async/await
在異步函數(shù)中調(diào)用

async getUsersFromApi() {
  try {
    let response = await fetch('https://mywebsite.com/endpoint/');
    return response.users;
  } catch(error) {
    throw error;
  }
}

WebSocket
websocket
XMLHttpRequest

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', 'https://mywebsite.com/endpoint.php');
request.send();

例子

react-network

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ToastAndroid,
  Alert,
} = React;
var AwesomeProject = React.createClass({
  getByFetch : function(){
    fetch('https://m.baidu.com' )
    .then((response) => response.text())
    .then((responseText) => {
      ToastAndroid.show(responseText, ToastAndroid.SHORT);
      console.warn(new Date().getMilliseconds());
    })
    .catch((error) => {
      console.warn(error);
    }).done();
    console.warn('請求是異步的:'+new Date().getMilliseconds());
  },
  getByXMLHttpRequest : function(){
    var request = new XMLHttpRequest();
    request.onreadystatechange = (e) => {
      if (request.readyState !== 4) {
        return;
      }

      if (request.status === 200) {
        ToastAndroid.show('success'+ request.responseText ,ToastAndroid.SHORT);
      } else {
        console.warn('error');
      }
    };

    request.open('GET', 'https://m.baidu.com');
    request.send();
  },

  postSource:  function(){
    fetch('https://m.baidu.com' )
    .then((response) => response.text())
    .then((responseText) => {
        // Works on both iOS and Android
        Alert.alert(
          '請求結(jié)果',
          responseText.substring(0,100),
          [
            {text: 'Ask me later', onPress: () => console.warn('Ask me later pressed')},
            {text: 'Cancel', onPress: () => console.warn('Cancel Pressed'), style: 'cancel'},
            {text: 'OK', onPress: () => console.warn('OK Pressed')},
          ]
        )
    })
    .catch((error) => {
      console.warn(error);
    }).done();

  },


  render: function() {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center' }}>
        <TouchableOpacity onPress={this.getByFetch} style={ styles.button }>
          <Text  >GET by fetch</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.getByXMLHttpRequest} style={ styles.button }>
          <Text >GET by XmlHttpRequest</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress= { this.postSource } style={ styles.button }>
          <Text >POST</Text>
        </TouchableOpacity>
      </View>
    );
  }
});

var styles = StyleSheet.create({
    button: {
      width : 180,
      height: 50,
      justifyContent:'center',
      backgroundColor: '#e2e2e2',
      alignItems:'center',
      margin: 10,
    }
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);