React Native导航react-navigation经验浅谈

react-navigation是一个很好用的导航组件，官方文档也很详细：https://reactnavigation.org/docs/intro/ 虽然用的很爽，但是在使用过程中还是遇到了一些问题，最大的问题是如何进行项目中的导航嵌套。

首先介绍一下react-navigation中导航的三种形式：
1.StackNavigator 页面堆栈导航
2.TabNavigator 底部（或顶部）标签导航
3.DrawerNavigator 侧边栏滑动导航

关于这三种导航具体是什么样子的，可以自己试试或者看官方网站中他们在Expo上有个演示的app，很详细。

在项目中遇到的问题是如何组织嵌套这三种导航，需要实现的导航效果是有一个左边滑动导航，一个底部的4个标签的导航，然后在页面中点击按钮会转到新的堆栈导航，效果如图

但是构建项目的时候如何组织嵌套这三种代码，经过了很多次不同的尝试，参考官方github的issue：https://github.com/react-community/react-navigation/issues/1849
有人推荐可以这样嵌套

StackNavigator
- TabNavigator
- DrawerNavigator

（ 官方文档中关于DrawerNavigator最后有这样一句话：
Please bear in mind that if you nest the DrawerNavigation, the drawer will show below the parent navigation. 如果按上面那样实现嵌套的话，侧边栏的滑动导航高度不会占全屏，StackNavigator的顶栏会占去一部分高度，drawer是在stack下面的）

然后还举了个Android Twitter的例子：

StackNavigator
- Login Screen
- Home Screen
  + TabNavigator
    - Feed
    - Search
    - Notifications
    - Messages
- DrawerNavigator
  (custom made the content & drawer list to call navigation.navigate)
- Profile
- Highlights
- Moments
- Lists
- Connect
...etc
```

经过多次尝试，我的嵌套导航是这样的

DrawerNavigator
    - StackNavigator
        - TabNavigator

即Drawer是根导航，stack嵌套在其下，然后tab又嵌套在stack下。
这样做有一个小小的奇怪的地方，就是Drawer中会显示三个导航，如图中有“我的”“登录”，原本在“我的”上面还有一个标签，用来回到主页，但是看上去很奇怪就没有设置标签文字，但是应该是有办法不显示的，我一开始想的是直接改动node_modules中引用的源代码判断第一条不显示。。。后来想想不对啊，，，npm install的时候岂不是，，，然后没有想到解决办法只是把标签内的文字设成空的。

为方便参考，下面是我的导航组件的源代码

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  Button,
  ScrollView,
  View
} from "react-native";
import { StackNavigator, TabNavigator, DrawerNavigator } from "react-navigation";
import { DrawerItems } from "react-navigation";

// 实现自定义IconFont更好用，取消引入Ionicons
// import Ionicons from "react-native-vector-icons/Ionicons";
import { IconFont } from "./IconFont";

// 首页
import { HomeScreen } from "../views/HomeScreen";
// 打卡页面
import { CardScreen } from "../views/CardScreen";
// 清单页面
import { ListScreen } from "../views/ListScreen";
// 记账页面
import { AccountScreen } from "../views/AccountScreen";
// 我的页面
import { MyScreen } from "../views/MyScreen";
// 登录页面
import { LoginScreen } from "../views/LoginScreen";

// 添加卡片
import { AddCard } from "../views/Card/AddCard";
// 添加清单
import { AddList } from "../views/List/AddList";
// 清单列表
import { ListContent } from "../views/List/ListContent";
// 清单详情
import { ListDetail } from "../views/List/ListDetail";

/*
 * stackNavigator
 * 四个主页面
*/
const stackOption = {
    navigationOptions: {
      headerTintColor: "#fff",
      headerStyle: {
        backgroundColor: "#6495ED",//矢车菊蓝
      }
  }
}

// 我的导航
const MyStack = StackNavigator({
    MyScreen: {
      screen: MyScreen,
      navigationOptions: {
        title: "我的",
        tabBarLabel: "我的",
        tabBarIcon: ({ tintColor, focused }) => (
          <Ionicons 
            name={"md-create"} 
            size={28} 
            style={{ color: tintColor }} 
          />
        ),
      },
    },
},stackOption);

/*
 * tabNavigator
 * 
*/
const AppTabNav = TabNavigator({
    Home: { 
      screen: HomeScreen,
      navigationOptions: {
        title: "梦想助手",
        tabBarLabel: "首页",
        tabBarIcon: ({ tintColor, focused }) => (
          <IconFont
            font="&#xe7d8;"
            style={{ color: tintColor, fontSize: 26 }}
          />
        ),
      },
    },
    Card: { 
      screen: CardScreen,
      navigationOptions: ({ navigation }) => ({
        title: "梦想打卡",
        tabBarLabel: "打卡",
        tabBarIcon: ({ tintColor, focused }) => (
          <IconFont
            font="&#xe751;"
            style={{ color: tintColor, fontSize: 26 }}
          />
        ),
        headerRight: <IconFont 
                        font="&#xe6da;" 
                        style={{color: "#fff", marginRight: 15, fontSize: 30}} 
                        onPress={() => navigation.navigate("AddCard") } 
                     />,
      }),
    },
    List: { 
      screen: ListScreen,
      navigationOptions: ({ navigation }) => ({
        title: "梦想清单",
        tabBarLabel: "清单",
        tabBarIcon: ({ tintColor, focused }) => (
          <IconFont
            font="&#xe65b;"
            style={{ color: tintColor, fontSize: 26 }}
          />
        ),
        headerRight: <IconFont 
                        font="&#xe6da;" 
                        style={{color: "#fff", marginRight: 15, fontSize: 30}} 
                        onPress={() => navigation.navigate("AddList") } 
                     />,
      }),
    },
    Account: { 
      screen: AccountScreen,
      navigationOptions: {
        title: "记账",
        tabBarLabel: "记账",
        tabBarIcon: ({ tintColor, focused }) => (
          <IconFont
            font="&#xe614;"
            style={{ color: tintColor, fontSize: 26 }}
          />
        ),
      },
    }
}, {
    initialRouteName: "Home",
    tabBarPosition: "bottom",
    tabBarOptions: {
      showIcon: true,
      showLabel: false,

      activeTintColor: "#6495ED",
      inactiveTintColor: "#666",

      indicatorStyle: {
        backgroundColor: "#fff",
      },
      style: {
        backgroundColor: "#fff",
        borderTopWidth: 1,
        borderTopColor: "#f0f0f0",
      }
    }
});



const AppStack = StackNavigator({
    Home: {
      screen: AppTabNav,
    },
    AddCard: { 
      screen: AddCard,
      navigationOptions: {
          title: "添加卡片"
      }
    },
    AddList: {
      screen: AddList,
      navigationOptions: {
          title: "添加清单"
      }
    },
    ListContent: {
      screen: ListContent,
      navigationOptions: {
          title: "列表标题"
      }
    },
    ListDetail: {
      screen: ListDetail,
      navigationOptions: {
          title: "列表标题",
          headerRight: <IconFont 
                        font="&#xe645;" 
                        style={{color: "#fff", marginRight: 15, fontSize: 28}} 
                        onPress={() => alert("ok") } 
                     />,
      }
    },
}, stackOption);




/*
 * drawerNavigator
 * 
*/
// 自定义侧边导航栏
const DrawerContent = (props) => {
  return(
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.welcome}>欢迎</Text>
      </View>
      <DrawerItems {...props} />
    </View>
  )
};

export const AppNav = DrawerNavigator({
  App: {
      screen: AppStack,
      navigationOptions: {
        title: "",
        tabBarLabel: "",
      },
  },
  MyScreen: {
    screen: MyStack,
  },
  LoginScreen: {
      screen: LoginScreen
  },
},{
  contentComponent: props => <ScrollView><DrawerContent {...props} /></ScrollView>
});


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    height: 200,
    width: "100%"
  },
  welcome: {
    fontSize: 20,
    height: 80,
    textAlign: "center",
    textAlignVertical: "center"
  },
});