Fetch的使用

import React,{ Component } from 'react';

import {

    AppRegistry,

    ListView,

    Image,

    Text,

    StyleSheet,

    View,

    TouchableHighlight

} from 'react-native';

 

class SimpleNavigationApp extends Component{

    constructor(props){

        super(props);

        this.state = {

        title:'',

        slug:'',

        };

    }

    

    fetchData = ()=>{

        fetch('http://bbs.reactnative.cn/api/category/3')

        .then((response)=>response.json())

        .then((jsondata)=>{

              this.setState({

                            title:jsondata.topics[0].title,

                            slug:jsondata.topics[0].slug,

                            })

              })

        .catch((error)=>{

               console.warn(error);

               });

 

    };

    

    

    

  render() {

    return (

      <View style={{flex: 1, paddingTop: 22}}>

            <Text>

                RN中文網頭條文章：

            </Text>

            <Text>

            {this.state.title}

            </Text>

            <Text style={styles.bigblue}>

            {this.state.slug}

            </Text>

            <TouchableHighlight onPress={this.fetchData}>

                <Text>提交</Text>

            </TouchableHighlight>

    </View>

    );

  }};

 

const styles = StyleSheet.create({

                                 bigblue: {

                                 color: 'blue',

                                 fontWeight: 'bold',

                                 fontSize: 30,

                                 },

                                 red: {

                                 color: 'red',

                                 },

       });

 

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