（Android）react-native中路由跳转react-navigation

本文章只是个人用到react-navigation的一些总结。

1、安装react-navigation

yarn add react-navigation --save

2、先用该组件实现最简单的路由跳转功能。

项目的结构如下：

App.js代码：

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

import Router from "./src/router/router"
export default class App extends Component<{}> {
  render() {
    return (
        <View style={styles.container}>
          <Router></Router>
        </View>
    );
  }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    }
}); 

router.js代码：

import {
    StackNavigator
} from 'react-navigation';
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
import One from "../android/one"
import Two from "../android/two"
import Three from "../android/three"
const Router = StackNavigator({
    // 将需要跳转的页面注册在这里，全局才可以跳转
    One:{
        screen:One,
        navigationOptions:{
            header:null
        }
    },
    Two:{
        screen:Two,
        navigationOptions:{
            header:null
        }
    },
    Three:{
        screen:Three,
        navigationOptions:{
            header:null
        }
    }
},{
    initialRouteName:"One",
    transitionConfig:()=>({
        // 只要修改最后的forVertical就可以实现不同的动画了。
        screenInterpolator:CardStackStyleInterpolator.forHorizontal,
    })
});
export default Router;

路由跳转的代码：比如在第一个页面中跳到第二个页面

const { navigate } = this.props.navigation;
navigate('Two');

路由跳转并传参：比如在第一个页面中

                    const { navigate } = this.props.navigation;
                    navigate('Two',{
                        fun:this.componentWillMount.bind(this)
                    });

在所跳到的第二个页面中（Two）接收传递的参数：

    componentWillMount(){
       console.log(this.props.navigation.state.params.fun)
    }

返回上一级页面的代码：

                <TouchableOpacity style={styles.btn} onPress={()=>{
                    this.props.navigation.goBack()
                }}>
                    <Text>返回到上一个页面</Text>
                </TouchableOpacity>

从第三个页面返回到第一个页面（即返回多层的代码）：

第一个页面跳第二个代码

                    const { navigate } = this.props.navigation;
                    navigate('Two');

第二个页面跳转到第三个页面代码：

                <TouchableOpacity style={styles.btn} onPress={()=>{
                    const { navigate } = this.props.navigation;
                    navigate('Three',{
                        //this.props.navigation.state.key这个key是上个页面（One）的key
                        key_one:this.props.navigation.state.key
                    });
                }}>
                    <Text>跳转到第三个页面</Text>
                </TouchableOpacity>

第三个页面返回第一个页面代码：

                <TouchableOpacity style={styles.btn} onPress={()=>{
                    this.props.navigation.goBack(this.props.navigation.state.params.key_one)
                }}>
                    <Text>跳转到第一个页面</Text>
                </TouchableOpacity>

总结：this.props.navigation.goBack(key)，返回方法的参数是key，这个key是每个注册的路由页面特有的，并且每个页面的key只能在它跳到的下一个页面获得。比如第一个页面的key只能在第二个页面中通过this.props.navigation.state.key获得，如上，将获得的key通过路由跳转传参传给第三个页面，在第三个页面用this.props.navigation.state.params.key_one获得所传的参数，放在goback的参数中实现了返回到指定的页面。

解决快速点击时会进行路由多次跳转：

将react-navigation/src/addNavigationHelpers.js的内容改为：

/**
 * @flow
 *
 * Helpers for navigation.
 */

import type {
    NavigationAction,
    NavigationProp,
    NavigationParams,
} from './TypeDefinition';

import NavigationActions from './NavigationActions';

export default function<S: *>(navigation: NavigationProp<S, NavigationAction>) {
    let debounce = true;
    return {
        ...navigation,
        goBack: (key?: ?string): boolean =>
            navigation.dispatch(
                NavigationActions.back({
                    key: key === undefined ? navigation.state.key : key,
                })
            ),
        navigate: (
            routeName: string,
            params?: NavigationParams,
            action?: NavigationAction
        ): boolean => {
            if (debounce) {
                debounce = false;
                navigation.dispatch(
                    NavigationActions.navigate({
                        routeName,
                        params,
                        action,
                    }),
                );
                setTimeout(
                    () => {
                        debounce = true;
                    },
                    500,
                );
                return true;
            }
            return false;
        },

        /**
         * For updating current route params. For example the nav bar title and
         * buttons are based on the route params.
         * This means `setParams` can be used to update nav bar for example.
         */
        setParams: (params: NavigationParams): boolean =>
            navigation.dispatch(
                NavigationActions.setParams({
                    params,
                    key: navigation.state.key,
                })
            ),
    };
}