React-native 路由 - navigation

路由插件

react-navigation 路由插件

react-navigation-stack 创建路由内容

import { createAppContainer } from 'react-navigation'; 
import { createStackNavigator } from 'react-navigation-stack';

import Login from '../src/pages/login'; // login页

const AppNavigator = createStackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: '登录页',
      headerShown: false,
    },
  },
})

// 实例化导航
export default createAppContainer(AppNavigator);

react-navigation-tabs 底部导航

import { createAppContainer } from 'react-navigation'; 
import { createBottomTabNavigator } from 'react-navigation-tabs';

// 订单模块
const _Order = createStackNavigator({

  Order: {
    screen: Order,
    navigationOptions: {
      title: `订单`,
      headerShown: false,
    },
  },

}, {
  navigationOptions: ({ navigation }) => ({
    // 是否显示导航
    tabBarVisible: navigation.state.index === 0 ? true : false,
    // 导航文字
    tabBarLabel: '订单',
    // 导航logo
    tabBarIcon: ({focused}) => {
      if (!focused) {
        return <Image source={icon.order} style={{height: 24, width: 24,}}/>
      } else {
        return <Image source={icon.order_sel} style={{height: 24, width: 24,}}/>
      }
    },
  })
})

// 我的模块
const _Me = createStackNavigator({
    ....
})

// 底部导航
const bottomTab = createBottomTabNavigator({
  Order: _Order,

  Me: _Me,

}, {
  // 选择导航样式
  tabBarOptions: {
    activeTintColor: '#384E8C',
  },
})


export default createAppContainer(bottomTab);

底部导航效果：

重置路由

应用场景：当从登陆页进入项目之后物理返回或者toBack方法是不需要返回到登陆页的

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

// 重置路由 ， 防止物理返回跳转回登录页
this.props.navigation.dispatch(
    // 让index页面成为路由栈的第0个
    StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: "index" })]
    })
)