無盡路由深淵 ?

不不，這是路由啦 ?

使用React Navigation

別看他不是 React-Native- 開頭的就急者關掉啊！！！

他真的是 ReactNative 的路由套件(也推薦同根生的RNRF)

Routing and navigation for your React Native apps

切記都需要獨立引入

import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from 'react-navigation-drawer';

來個基本的 switch Navigator

const AppSwitchNavigator = createSwitchNavigator({
  HomeScreen: {
    screen: DetailsScreen,
  },
  BottomTabScreen: {
    screen: BottomTabScreen,
    navigationOptions: {
      // header: null,
      tabBarLabel: 'Screen A',
    },
  },
  DrawerScreen: {
    screen: Drawer,
    navigationOptions: {
      // header: null,
      headerTitle: '我是DrawerScreen',
    },
  },
  RouterScreen: {
    screen: Router,
    navigationOptions: {
      // header: null,
      headerTitle: '我是有Header的DrawerScreenTitle',
    },
  },
  IndexScreen: {
    screen: createStackNavigator({
      index: {
        screen: IndexScreen,
        // navigationOptions: {
        //   tabBarLabel: 'A!',
        //   headerTitle: '我是有Header的DrawerScreen',
        //   // header: null,
        //這段移到到元件內才可以減少自訂Header的麻煩
        // },
    
        defaultNavigationOptions: {
          title: '我是有Header的DrawerScreenTitle',
          // header: null,
        },
      },
    }),
  },
});

提供簡單的參考範例(很髒)：
https://github.com/CS6/helpnavigation