React Native 学习笔记（九）--网络请求 & 界面跳转

Part One

网络请求

对于网络请求咱们直接看一下模板
对于其他的网络请求库，大家也可以学习一下，由于我现在接触的关于JavaScript的网络请求库也不多，能力有限。所以大家如果有兴趣也希望大家能给我留言，共同学习。
下面的方式也是RN中提供的网络请求API。好了废话不多少了，咱们先顺一遍网络请求：

// 创建请求头，添加请求头信息var myHeaders = new Headers();myHeaders.append("Content-Type", "text/plain");myHeaders.append("Content-Lenght", content.length.toString());myHeaders.append("X-Custom-Header", "ProcessThisImmediately");// 请求体设置var myInit = {                method: 'GET',                headers: myHeaders,                mode: 'cors',                cache: 'default'              };// 创建请求var myRequest = new Request('www.csdn.com', myInit);// 发送请求   使用fetch()方法 发送请求fetch(myRequest)// 响应回调, then是一个链式处理函数.then(function(response){    return response.blob();})// 这里的函数的参数就是上面的then函数返回的值.then(function(myBlob){    // 进一步处理响应值});

上面的代码中Header提供的还有别的构造函数：

myHeaders = new Headers({  "Content-Type": "text/plain",  "Content-Length": content.length.toString(),  "X-Custom-Header": "ProcessThisImmediately",});

处理Header之外，还有一个需要我们注意的，也是需要我们深入学习的，那就是fetch，对于网络请求肯定是异步的。fetch方法会返回一个Promise，这种模式可以简化异步请求的代码写法。如下所示，我们可以轻松实现对响应体的处理：

// 定义一个请求数据的方法getMoviesFromApiAsync() {    return fetch('www.csdn.com')        .then((response) => response.json())        .then((responseJson) => {            return responseJson.blob;        })        .catch(            (error) => {                console.error(error.message);            }        );}

async / await 语法

// 注意这个方法前面有async关键字async getMoviesFromApi() {    try{        // 注意这里的await语句，其所在的方法必须有async关键字声明        let response = await fetch('www.csdn.com');        let responseJson = await response.json();        return responseJson.movies;    } catch(error) {        console.error(error);    }}

使用其他的网络库

React Native中已经内置了XMLHttpRequest API(也就是俗称的ajax)。一些基于XMLHttpRequest封装的第三方库也可以使用，例如 frisbee或者axios。但是注意不能使用jQuery，因为jQuery中还使用了很多浏览器中才有而RN中没有的东西。

var request = new XMLHttpRequest();request.onreadystatechange = (e) => {    if(request.readyState !== 4){        return;    }    if(request.status === 200){        console.log('success', request.responseText);    } else {        console.warn('error');    }};request.open('GET', 'https://mywebsite.com/endpoint/');request.send();

WebSocket支持

React Native 还支持 WebSocket，这种协议可以在单个TCP连接上提供 全双工的通信信道。

var ws = new WebSocket('ws://host.com/path');ws.onopen = () => {    // 打开一个连接    ws.send('something'); // 发送一个消息};ws.onmessage = (msg) => {    // 接收到了一个消息    console.log(msg.data);};ws.onerror = (e) => {    // 发生了一个错误    console.log(e.message);};ws.onclose = (e) => {    // 连接被关闭了    console.log(e.code, e.reason);};

Part Two

界面跳转

首先，我们先来了解一下在React Naive中实现界面跳转需要我们掌握的内容：
1.导航器

在React Native中导航器组件首推：Navigator。此组件是完全通过JavaScript实现的，因此可以跨平台工作，也便于定制。

2.场景（Scene）

场景就是一个全屏的组件。也可以简单的理解为屏幕上放的最大的父布局、父容器。
下面的代码就是创建了一个场景：

import React, {Component} from 'react';import {View, Text} from 'react-native';// 注意：我们创建的这个类是通过 export default 关键字声明的。意思就是声明的这个类可以在其他组件中引入import React, { Component, PropTypes } from 'react';import { View, Text, TouchableHighlight } from 'react-native';export default class MyScene extends Component {  static propTypes = {    title: PropTypes.string.isRequired,    onForward: PropTypes.func.isRequired,    onBack: PropTypes.func.isRequired,  }  render() {    return (      <View>        <Text>Current Scene: { this.props.title }</Text>        <TouchableHighlight onPress={this.props.onForward}>          <Text>点我进入下一场景</Text>        </TouchableHighlight>        <TouchableHighlight onPress={this.props.onBack}>          <Text>点我返回上一场景</Text>        </TouchableHighlight>          </View>    )  }}

下面我们来使用这个场景：

import React, { Component } from 'react';import { AppRegistry } from 'react-native';// 引入我们的MyScene文件import MyScene from './MyScene';class TestApp extends Component{    render(){        return(            <MyScene />        );    }}AppRegistry.registerComponent('TestApp', () => TestApp);

下面重点讲一下导航器 — Navigator
使用导航器经常会碰到“路由（route）”的概念，在React Native中专指包含了场景信息的对象。在使用导航器之前，我们先来看一下导航器的一些API :

下面我们以场景MyScene为例来学习一下这些API（也就是说api中的属性或者方法的参数有需要的我们就直接按照场景MyScene来写了）
initialRoute

initialRoute = { {场景对象的属性: 属性值 , 路由自定义的属性 : 属性值} }
initialRoute = { {title: ‘MySceneTitle’} }
此属性用于指定要渲染的场景对象，自定义的属性值一般是用来区分不同的场景的。
initialRoute必须是initialRouteStack中的一个路由。initialRoute默认为initialRouteStack中最后一项。

initialRouteStack [object]

提供一个路由集合用来初始化。如果没有设置初始路由的话则必须设置该属性。如果没有提供该属性，它将被默认设置成一个只含有initialRoute的数组。

renderScene

此属性用于指定场景如何展示。函数的两个参数：
路由 route：可以通过区分路由自定义参数，来展示不同的场景；
导航器对象navigator：用来变化场景，最常用的就是其 push() 和 pop()方法，分别用来 入栈 和 出栈；
renderScene = {funtion(场景对象(路由), 导航器对象){ return 场景;}}

renderScene = {    (route, navigator) =>     <MyScene        title={route.title}        // 下一个        onForward={             function(){                navigator.push(                    { title: '第二个界面' }                );            }        }        // 返回        onBack={             function(){                navigator.pop();            }        }    />}

上面的和官网中的也就有一点不同，我没有在路由中创建自定义的属性，目的也是为了能简化代码，便于理解和学习。
另外，有兴趣的可以看一下 Navigator API 文档 和这个教程。毕竟官网的这个文档比较简略。

configureScene

可选属性，用来配置场景的动画和手势，属性值是function。两个参数，一个是当前路由，一个是当前的路由栈。返回值是一个场景配置对象。
（route, routeStack） => Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.PushFromRight (默认)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump

---

Part Three

完整代码

import React, { Component } from 'react';import { AppRegistry, Navigator, Text, View } from 'react-native';import MyScene from './MyScene';class TestApp extends Component {  render() {    return (      <Navigator        initialRoute={{ title: 'My Initial Scene' }}        renderScene={(route, navigator) =>          <MyScene            title={route.title}            // Function to call when a new scene should be displayed                       onForward={ () => {              navigator.push({                title: 'Scene ' + nextIndex              });            }}            // Function to call to go back to the previous scene            onBack={() => {                navigator.pop();            }}          />        }      />    )  }}AppRegistry.registerComponent('TestApp', () => TestApp);

Part Four

资料

React Native 0.39 Navigator
React Native 中文社区

另外：以上学习博客中的连接如果打不开的话，请大家注意一下连接中的RN版本。后期我会再审查一遍连接指向，谢谢！！请大家多多指教！！