Fetch的使用

标签：reg   pre   rom   data   set   category   imp   nts   catch   

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);

Fetch的使用

标签：reg   pre   rom   data   set   category   imp   nts   catch   

原文地址：http://www.cnblogs.com/zhoujiahong/p/6195774.html