自己做項目中的重點知識蠢棱，不是教程帜慢，如果學習的話可以拿來參考懈息。源代碼[地址][12]
[12]: https://github.com/BaiPeiHe/react-native

簡介

網(wǎng)絡編程利器-Fetch 的基本使用
Fetch 是全局的烹看，在 React Native 任何地方都可以使用，不需要額外導入考廉。
官網(wǎng)地址

測試數(shù)據(jù) 網(wǎng)絡地址

創(chuàng)建頁面

1、創(chuàng)建 FetchTest.js 文件携御，代碼如下
2昌粤、在 index.ios.js 文件導入 FetchTest.js 文件
3既绕、在 index.ios.js 渲染 FetchTest

// 1、FetchTest.js 文件
import React,{Component} from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableOpacity,
}from 'react-native';

import NavigationBar from './NavigationBar'

export default class FetchTest extends Component{

    render(){
        return(
            <View style={styles.container}>
                <NavigationBar
                    title={'Fetch 的使用'}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'white'
    },
    text:{
        fontSize:22
    }
});

// 2涮坐、導入頭文件
import FetchTest from './js/FetchTest'

// 3凄贩、渲染文件

    render() {
        return (
            <View style={styles.container}>
                 
                 <FetchTest/>
            </View>
        );
    }

加載數(shù)據(jù)

注意：要在 iOS 源程序中修改配置

App Transport Security Setting
    Allow Arbitrary Loads       YES
    Exception Domain

    // 構(gòu)造函數(shù)
    constructor(props){
        super(props);
        this.state={
            result:''
        }
    }
    // 請求數(shù)據(jù)
    onLoad(url){
        fetch(url)
            // 轉(zhuǎn)為 json
            .then(response=>response.json())
            // 獲取到 json
            .then(result=> {
                this.setState({
                    result:JSON.stringify(result)
                })
            })
            // 請求出錯
            .catch(error=>{

                this.setState({

                    result:'err+' + JSON.stringify(error)
                })
            })
    }

return(
            <View style={styles.container}>
                <NavigationBar
                    title={'Fetch 的使用'}
                />

                <Text style={styles.text}
                    onPress={()=>this.onLoad('[測試數(shù)據(jù)][3]')}
                >獲取數(shù)據(jù)</Text>
                <Text>提交數(shù)據(jù)</Text>
                <Text>返回結(jié)果:{this.state.result}</Text>
            </View>
        )

提交數(shù)據(jù)

    // 提交數(shù)據(jù)的方法
    onSubmit(url,data){

        fetch(url,{
            method:'POST',
            header:{
                // 服務器返回的數(shù)據(jù)類型
                'Accept':'application/json',
                // 上傳到服務的參數(shù)的類型
                'Content-Type':'application/json'
            },
            // 將 data 轉(zhuǎn)換為 json 類型的字符串
            body:JSON.stringify(data)
        })
            .then(response=>response.json())
            .then(result=>{
                this.setState({
                    // 將 json 轉(zhuǎn)換為字符串
                    result:JSON.stringify(result)
                })
            })
            .catch(error=>{
                this.setState({
                    result:'err + ' + JSON.stringify(error)
                })
            })

    }

    render(){
        return(
            <View style={styles.container}>
                <NavigationBar
                    title={'Fetch 的使用'}
                />
                
                <Text style={styles.text}
                      onPress={()=>this.onSubmit('[上傳數(shù)據(jù)鏈接][4]',{userName:'小明',password:'123456'})
                      }
                >提交數(shù)據(jù)</Text>
                <Text>返回結(jié)果:{this.state.result}</Text>
            </View>
        )
    }
}