React Native
大部分 App 都离不开网络资源请求。React Native 提供了 Fetch API 来处理网络请求，如果你使用过 XMLHttpRequest 或者其他的网络 API，Fetch API 与它们十分相似。
Fetch
下面我们写一个例子，读取火币网的比特币实时数据 API 中的数据。为了获取实时数据，示例中将会每一秒获取一次数据。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {
ticker: {}
};
setInterval(() => {
fetch('http://api.huobi.com/staticmarket/ticker_btc_json.js')
.then((response) => response.json())
.then((responseJson) => {
this.setState({ticker: responseJson.ticker});
})
.catch((error) => {
console.error(error);
});
}, 1000)
}
render() {
let ticker = this.state.ticker
return (
<View style={{paddingTop: 22}}>
<Text>High: {ticker ? ticker.high : ''}</Text>
<Text>Low: {ticker ? ticker.low : ''}</Text>
<Text>Last: {ticker ? ticker.last : ''}</Text>
<Text>Vol: {ticker ? ticker.vol : ''}</Text>
<Text>Buy: {ticker ? ticker.buy : ''}</Text>
<Text>Sell: {ticker ? ticker.sell : ''}</Text>
</View>
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
比特币实时行情数据示例
WebSocket
React Native 同时也支持 WebSocket 连接方式进行网络通信，与在 Web 开发时使用 WebSocket 类似。
var ws = new WebSocket('ws://host.com/path');
ws.onopen = () => {
// connection opened
ws.send('something'); // send a message
};
ws.onmessage = (e) => {
// a message was received
console.log(e.data);
};
ws.onerror = (e) => {
// an error occurred
console.log(e.message);
};
ws.onclose = (e) => {
// connection closed
console.log(e.code, e.reason);
};
