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版本。后期我会再审查一遍连接指向，谢谢！！请大家多多指教！！