React native 中使用Fetch请求数据

一、代码

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

 //默认应用的容器组件
 export default class App extends Component {

     //构造函数
     constructor(props) {
         super(props);
         this.state = {
             responseText: null
         };
     }

     //渲染
     render() {
         return (
             <View style={styles.container}>
                 <Text style={styles.item} onPress={this.doFetch.bind(this)}>获取数据</Text>
                 <Text>{this.state.responseText}</Text>
             </View>
         );
     }

     //使用Fetch请求数据
     doFetch(){
         fetch('https://httpbin.org/get')
             .then(function(data){
                 return data.text();
             })
             .then((responseText) => {
                 alert("请求成功！");
                 this.setState({responseText})
                 console.log(responseText);
             })
             .catch((error) => {
                 alert("请求失败！");
             });
     }
 }

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

二、效果图