ReactNative使用 react-navigation 详解

react-navigation是官方主推的导航组件，致力于解决导航卡顿，数据传递，Tabbar和navigator布局，支持redux。

最新版本为3.x，大多文档介绍的是 1.x 或 2.x 的用法，本文使用3.x实现

1、主要内容

StackNavigator 顶部导航条，用来跳转页面和传递参数。

TabNavigator  底部标签栏，用来区分模块。

DrawerNavigator 抽屉，从App侧方滑出一个页面。

2、引入创建

 实现目标：

首先显示登陆页面，登陆成功后显示主页，主页布局采用底部标签栏

App.js：

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

import Login from './src/Login';
import Home from './src/Home';
import User from './src/User';

const AppStack = createStackNavigator(
  { 
    Home: {screen : Home}, 
    User: {screen : User},  
  },
  {
      mode: 'modal',
      headerMode: 'none',
  }
); 
 
const RootNavigator = createSwitchNavigator(
  {
    AuthLoading: Login,
    App: AppStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);
 
export default createAppContainer(RootNavigator);

 

转载于:https://www.cnblogs.com/fanlu/p/11097766.html