How to use react-navigation - 10 common examples

/**
 * StackRouter
 */

const stackRouter = StackRouter(innerRouteConfig);
const stackNavigateAction = {
  type: "Navigation/NAVIGATE",
  routeName: "Test3",
};
stackRouter.getStateForAction(stackNavigateAction, null);

/**
 * TabRouter
 */

const tabRouter = TabRouter(innerRouteConfig);
const tabNavigateAction = {
  type: "Navigation/NAVIGATE",
  routeName: "Test1",
};
tabRouter.getStateForAction(tabNavigateAction, null);

const fakeNavigateAction = {
  fake: "Navigation/NAVIGATE",
  blah: "Test1",
};
// $ExpectError not a valid action!
tabRouter.getStateForAction(fakeNavigateAction, null);

* Welcome to the main entry point of the app.
 *
 */

import "./i18n"
import * as React from "react"
import { Provider } from "react-redux"
import { AppRegistry, DeviceEventEmitter, StatusBar, View, ViewStyle } from "react-native"
import { RootNavigator } from "./navigation/root-navigator"
import { createAppContainer } from "react-navigation"

import configureStore from "./store"
import { PersistGate } from "redux-persist/integration/react"
import Toast from "react-native-easy-toast"

const AppContainer = createAppContainer(RootNavigator)
const { persistor, store } = configureStore

interface AppState {}

/**
 * This is the root component of our app.
 */
export class App extends React.Component<{}, AppState> {
  listener
  toastRef

  componentDidMount() {
    console.disableYellowBox = true // TODO: Comment this line when preparing for a release
    this.listener = DeviceEventEmitter.addListener("showToast", inner => {
      this.toastRef.show(inner)
    })

nullify = nextAppState => {
    console.log("App changed to: ", nextAppState);
    if (nextAppState === "inactive") {
      // Writing it 'null'
      this.setState({ pwd: stringToU8("000000000000000000000000") });
      // Removing it's refs do the GC can clean it
      delete this.state.pwd;
      // Construct a reset action for the naviggator
      const resetAction = NavigationActions.reset({
        index: 0,
        actions: [
          NavigationActions.navigate({
            routeName: "Initial"
          })
        ]
      });
      this.props.navigation.dispatch(resetAction);
      console.log("Key Cleaned & Rerouted to login");
    }
  };

const screenTracking = ({ getState }) => next => action => {
  if (
    action.type !== NavigationActions.NAVIGATE &&
    action.type !== NavigationActions.BACK
  ) {
    return next(action);
  }

  const currentScreen = getCurrentRouteName(getState().nav);
  const result = next(action);
  const nextScreen = getCurrentRouteName(getState().nav);
  if (nextScreen !== currentScreen) {
    try {
      if (__DEV__ && console.tron) {
        console.tron.log(`NAVIGATING ${currentScreen} to ${nextScreen}`);
      }
      // Example: Analytics.trackEvent('user_navigation', {currentScreen, nextScreen})
    } catch (e) {
      console.tron.log(e);

const screenTracking = ({ getState }) => next => (action) => {
  if (
    action.type !== NavigationActions.NAVIGATE &&
    action.type !== NavigationActions.BACK
  ) {
    return next(action)
  }

  const currentScreen = getCurrentRouteName(getState().nav)
  const result = next(action)
  const nextScreen = getCurrentRouteName(getState().nav)
  if (nextScreen !== currentScreen) {
    try {
      console.tron.log(`NAVIGATING ${currentScreen} to ${nextScreen}`)
      // Example: Analytics.trackEvent('user_navigation', {currentScreen, nextScreen})
    } catch (e) {
      console.tron.log(e)
    }
  }

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

// grab screens
import ModalCastConnect from '../screens/ModalCastConnect';
import ModalAddProfile from '../screens/ModalAddProfile';
import ModalManageProfiles from '../screens/ModalManageProfiles';
import ModalVideo from '../screens/ModalVideo';
import ModalWebView from '../screens/ModalWebView';

// grab tabbed stacks
import TabNavigator from './TabNavigator';

// grab modal routes (dynamic transitions)
import ModalRoutes from './ModalRoutes';

const StackNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator
    },

    // Modals
    // /////////////////////////////////////////////////////////////////////////
    ModalCastConnect: {
      screen: ModalCastConnect,
      navigationOptions: {
        gesturesEnabled: false
      }
    },
    ModalAddProfile: {
      screen: ModalAddProfile,
      navigationOptions: {

}
      >
        
      

    )
  }
}

const ExtraViews = { ...Views, MainTabBar }
delete ExtraViews.Find
delete ExtraViews.Video
delete ExtraViews.Mine
delete ExtraViews.Friends
delete ExtraViews.Account
const AppNavigator = createStackNavigator({ ...ExtraViews }, { ...STACKNAVIGATOR_DEFAULT_OPTIONS, initialRouteName: 'MainTabBar' })

const IncludeModalContainerNavigator = createStackNavigator({
  Base: { screen: AppNavigator }
  /* add modal screen */
}, { ...MODAL_DEFAULT_OPTIONS })

const Base = createSwitchNavigator({
  Load: ExtraViews.Loading,
  App: IncludeModalContainerNavigator,
  Auth: ExtraViews.Login
}, { initialRouteName: 'Load' })

const AppContainer = createAppContainer(Base)

export default AppContainer

{/**/
}
{/**/
}
{/**/
}
{/**/
}
{/**/
}
{/**/
}
{/**/
}

const TopicListStack = StackNavigator({
        List: {screen: TopicListScreen},
        Details: {screen: TopicDetailScreen},
        Comments: {screen: TopicCommentsScreen},
    },
    {
        initialRouteName: 'List',
        /* The header config from HomeScreen is now here */
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#32CD32',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
            drawerLockMode: Platform.OS === 'ios' ? 'locked-closed' : 'unlocked'

//             headerTintColor: '#fff'
//         }
//     }
// );

// const DrawerNav = DrawerNavigator({
//     DrawerNav: {
//         screen: DrawHome
//     }
// }, {
//     drawerWidth: 300,
//     contentComponent: (props) => 
// })


const App = StackNavigator(
    {
        Splash: {screen: Splash},
        Home: {
            screen: Tab,
        },
        LoginRegister: {
            screen: LoginRegister
        },
        ExchangeDetail: {
            screen: ExchangeDetail
        },
        WebViewPage: {
            screen: WebViewPage
        },
        WebViewFullScreen: {
            screen: WebViewFullScreen

const StackModalNavigator = (routeConfigs, navigatorConfig) => {
  const CardStackNavigator = StackNavigator(routeConfigs, navigatorConfig);
  const modalRouteConfig = {};
  const routeNames = Object.keys(routeConfigs);

  for (let i = 0; i < routeNames.length; i++) {
    modalRouteConfig[`${routeNames[i]}Modal`] = routeConfigs[routeNames[i]];
  }

  const ModalStackNavigator = StackNavigator(
    {
      CardStackNavigator: { screen: CardStackNavigator },
      ...modalRouteConfig,
    },
    {
      // 如果页面进入方式为 modal，需要自定义 header（默认 header 样式失效，都叠在一块了）
      mode: 'modal',
      headerMode: 'none',
    },
  );

  return ModalStackNavigator;
};