react-navigation在子路由中隐藏createBot

解决方案

      在百度上找了很多相关所谓的解决方案，并没有将问题解决，反而会让代码变得更加复杂，后来在谷歌中找到一位国际友人，把这条链接给了我们，照着链接中的做很轻松就解决了，原来这个问题在官方文档中就有解决方案，可惜的是目前只有英文文档可以用，中文文档还没更新。
      以下是这个问题的思路和解法：

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  Details: DetailsScreen,
});

const TabNavigator = createBottomTabNavigator({
  Feed: FeedStack,
  Profile: ProfileScreen,
});

const AppNavigator = createSwitchNavigator({
  Auth: AuthScreen,
  Home: TabNavigator,
});

      在这样一个路由结构中，包含登录页面，导航页面与导航的子页面，我们要在页面从FeedHome跳转到Details时隐藏BottomTabNavigator

      我们可以找到createBottomTabNavigator有一个属性可以控制它的显示与隐藏即设置tabBarVisible: false时底部导航隐藏。

      但是在这样的解构中，直接给DetailsScreen设置这个属性是不对的，DetailsScreen对应的是FeedStack 路由，相当于给FeedStack 设置tabBarVisible: false，所以页面不会有任何变化，那我们应该怎么做呢，以下是解决方案：

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  Details: DetailsScreen,
});

FeedStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible,
  };
};

      即给FeedStack添加navigationOptions 属性，让它在导航到其他路由时，使tabBarVisible = false，返回这个属性，即可给createBottomTabNavigator配置隐藏。

      还可以用设置路由层级的方式解这个问题，一下是代码：

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  /* any other route you want to render under the tab bar */
});

const TabNavigator = createBottomTabNavigator({
  Feed: FeedStack,
  Profile: ProfileScreen,
});

const HomeStack = createStackNavigator({
  Tabs: TabNavigator,
  Details: DetailsScreen,
  /* any other route you want to render above the tab bar */
});

const AppNavigator = createSwitchNavigator({
  Auth: AuthScreen,
  Home: HomeStack,
});