做react native APP使用react natigation遇到的坑，createStackNavigator和createBottomTabNavigator 混合使用该怎么使用呢？

最近自学的react native 其中的路由跳转很是头痛，纠结了好久，找了各种视频资料，网上朋友发布的相关的技术难题，好不容易才整理好，createStackNavigator和createBottomTabNavigator 混合使用就要先建立一个底部导航器，然后创建一个新的Stack，将底部导航器也创建。

简单的来说createStackNavigator是专门来创建一面堆栈的在需要使用的时候才能访问（比如：this.props.navigation.navigate ('Details')；所以要将所有的导航都是用createStackNavigator来创建出来！这样才合理，说的不怎么专业呀！

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {
  ActivityIndicator,
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native'
import { createStackNavigator, createAppContainer,createBottomTabNavigator } from "react-navigation"
import Ionicons from 'react-native-vector-icons/Feather';
// 创建Tab底部组将


// 引入组件
import HomeScreen from './src/pages/Home'
import ShoppingScreen from "./src/pages/Shopping"
import DetailsScreen from "./src/pages/Details"


class CartScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>CartScreen!</Text>
      </View>
    );
  }
}

class FindScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>FindScreen!</Text>
      </View>
    );
  }
}

class UserScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>UserScreen!</Text>
      </View>
    );
  }
}

//创建底部导航createBottomTabNavigator

const bottomTabNavigator = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Shopping: ShoppingScreen,
    Cart:CartScreen,
    Find:FindScreen,
    User:UserScreen,
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = 'home';
        }
        if (routeName === 'Shopping') {
          iconName = "shopping-bag";
        }
        if (routeName === 'Cart') {
          iconName = "shopping-cart";
        }
        if (routeName === 'Find') {
          iconName = "file";
        }
        if (routeName === 'User') {
          iconName = "user";
        }
        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'rgb(4,127,116)',
      inactiveTintColor: 'gray',
    },
  }
);


//创建全局导航器createStackNavigator
const  AppStack = createStackNavigator({
  bottomTabNavigator:{
    screen : bottomTabNavigator,
    navigationOptions:{
      header :null
    }
  },
//全局的stack 
  Details:{
    screen : DetailsScreen,
    navigationOptions:{
      title :"This is the details"
    }
  },
  initialRouteName:'bottomTabNavigator'
})


const AppStackContainer =  createAppContainer(AppStack);



export default class App extends Component{
  render() {
    return (
     <AppStackContainer />
    );
  }
}