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'
    },
});

二、效果图