react navigation是社区实现的react native界面跳转导航库，也是目前react native中最多人使用的路由开源库。一般来说react native项目都需要引入该库来进行开发，以下基于react navigation 3.x版本。

安装

expo sdk中使用

yarn add react-navigation

非expo sdk中使用

yarn add react-navigation
yarn add react-native-gesture-handler # 安装支持库
react-native link react-native-gesture-handler # link到native

使用

栈路由

栈路由与浏览器中导航是基本一致的，会将后续路由压入栈中，在返回时弹出。
A -> push -> B -> push -> C
C -> pop -> B -> pop -> A

interface IProps {
  // 声明路由器类型
  navigation: NavigationScreenProp;
}

class One extend React.Component {
  render() {
    return (
      
         this.props.navigation.push('Two')}>
          Two
        
      
    );
  }
}

class Two extend React.Component {
  render() {
    return (
      
         this.props.navigation.pop()}>
          Back
        
      
    );
  }
}

const Navigator = createStackNavigator({
  One: {screen: One},
  Two: {screen: Two}
}, {
  initialRouteName: 'One'
});

tab路由

与微信获取qq类似，下面有几个按钮，然后上面是页面

class TabBarComponent extends React.Component {
  render() {
    return (
      
        
            this.props.navigation.navigate('One')}>
             One
           
            this.props.navigation.navigate('Two')}>
              Two
           
        
      
    );
  }
}

// 创建tab路由
const TabNav = createBottomTabNavigator({
  One: One,
  Two: Two
}, {
  initialRouteName: 'One',
  // tab组件
  tabBarComponent: ({navigation}) => 
});

// tab路由加入栈路由
const Navigator = createStackNavigator({
  Tab: {screen: TabNav}
}, {
  initialRouteName: 'Tab'
});

参数

react navigation中支持在两个页面之间传递各种类型的参数，包括函数。

参数类型声明

interface IParams {
  id: number;
}

interface IProps {
  navigation: NavigationScreenProp;
}

参数传递

// push(name, params);
this.props.navigation.push(Tow, {id: 1}};

参数获取

// 自动推断为number类型
const id = this.props.navigation.getParam('id');

跳转

路由跳转

this.props.navigation.navigate(name);

路由push

this.props.navigation.push(name);

路由pop

this.props.navigation.pop();

路由多级返回

this.props.navigation.pop(count);

清空路由

一般用于退出登陆

import {NavigationActions,  StackActions} from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Login' })],
});

resetAction();

事件

react navigation支持事件的监听，包括willFocus, didFocus, willBlur, didBlur，以下介绍其中的didFocus和willBlur两个较为常用的事件。

didFocus

当前视图被显示时调用

private didFocus?: NavigationEventSubscription;
componentDidMount() {
  this.didFocus = this.props.navigation.addListener(
      'didFocus',
      payload => {
        console.log('显示');
      }
    );
}
componentWillUnmount() {
  // 最后移除监听
  this.didFocus && this.didFocus.remove();
}

willBlur

当前视图即将隐藏或移除时调用

this.willBlur = this.props.navigation.addListener(
      'willBlur',
      payload => {
        console.log('移除');
      }
    );

更多用法和api请查看官方文档，如有问题请留言咨询。

React Native && TypeScript: 四、路由器React Navigation

安装