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);