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