How to use the react-navigation.StackNavigator function in react-navigation

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

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

tabStyle: {
        margin: 2,
      },
      labelStyle: {
        fontSize: FONT_SIZE(9),
      },
    },
    lazy: true, //懒加载
    swipeEnabled: false,
    animationEnabled: false, //关闭安卓底栏动画
    tabBarPosition: "bottom",
    tabBarComponent: TabBarBottom
  }
);

const Navigation = StackNavigator(
  {
    Tabs: { screen: Tabs },
    Detail: { screen: Detail },
    QRCode: { screen: QRCode },
    UserInfo: { screen: UserInfo },
    Recently: { screen: Recently },
    SysMessage: { screen: SysMessage },
    ToastExample: { screen: ToastExample },
    Login: {
      screen: Login,
    },
    // ModalNavigation: { screen: ModalNavigation },
  },
  {
    mode: 'card',
    // initialRouteName: "Tabs",

import React, { Component } from "react";
import { StatusBar, StyleSheet, View } from "react-native";
import ExampleList from "./components/example-list";
import { routes } from "./utils/examples";
import { StackNavigator } from "react-navigation";
import { colors } from "./utils/colors";

const AppNavigator = StackNavigator({ // eslint-disable-line new-cap
  RootView: {
    screen: ExampleList,
    navigationOptions: { title: "Victory Native UIExplorer" },
  },
  ...routes,
}, {
  initialRouteName: "RootView",
  navigationOptions: {
    headerPressColorAndroid: "#6b8cb1",
    headerTintColor: colors.textColor,
  },
});

class VictoryNativeUIExplorer extends Component {
  render() {
    return (

import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, StatusBar, View } from 'react-native';
import { connect } from 'react-redux';
import { addNavigationHelpers, StackNavigator } from 'react-navigation';
import Routes from './routes';

const initialRouteName = 'Home';
export const AppNavigator = StackNavigator(Routes, { initialRouteName });

const AppWithNavigationState = ({ dispatch, nav }) => (
   
);

AppWithNavigationState.propTypes = {
  dispatch: PropTypes.func.isRequired,
  nav: PropTypes.object.isRequired,
};

const mapStateToProps = state => ({

backgroundColor={colors.primary}
            icon={{ name: 'lock', size: 18, type: 'font-awesome' }}
            onPress={this.handleSignUp} />
          {this.state.showMFAPrompt &&
            }
        
      
    );
  }
}

const SignUpStack = StackNavigator({
  SignUp: {
    screen: props => ,
    navigationOptions: {
      title: Constants.APP_NAME,
    }
  },
});

export default props => ;

import React, { AppRegistry } from 'react-native';

import { StackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import DetailScreen from './DetailScreen';

const App = StackNavigator({
  Home: { screen: HomeScreen },
  Detail: { screen: DetailScreen },
});

AppRegistry.registerComponent('PhotoBrowserExample', () => App);