使用react-navigation时如何实现在子导航(Stac

最近在尝试着开发react-native项目, 其中使用到了官方现在推荐的react-navigation插件.现在页面上有个需求, 就是在每个有tab页面的子页面上不能有底部的tabbar, 经过查找 github和react-navigation的官方文档终于找到了一种可用的解决方案.

这是程序的入口文件, 整个tab导航器的所有子页面都是一个stack-navigation,

import React, { Component } from 'react';
import { createBottomTabNavigator } from 'react-navigation';

export default class IndexPage extends Component {
  render () {
    return {
      <MainTabNavigation/>
    }
  }
}

const MainTabNavigation = createBottomTabNavigator({
  Home: {
    screen: HomeNavigation,
  },
  Category: {
    screen: CategoryNavigation,
  },
  Following: {
    screen: FollowingNavigation,
  },
  Mine: {
    screen: MineNavigation,
  }
}, {
  initialRouteName: 'Home'
});

以其中的一个HomeNavigation举例, 假如这个导航器中有两个页面homePage和postPage, 其中homePage上需要有tabbar, postPage上不要有tabbar, 那么代码HomeNavigation的代码可以这么写:

import React, { Component } from 'react';
import {
  View,
  Text
} from 'react-native';
import { createStackNavigator } from "react-navigation";


class HomePage extends Component {
  render () {
    return (
      <View>
        <Text onPress={this.props.navigation.navigate('Post')}>
          This is Home Page, To Post!
        </Text>
      </View>
    )
  }
}

class PostPage extends Component {
  render () {
    return (
      <View>
        <Text>
          This is Post Page
        </Text>
      </View>
    )
  }
}

const HomeNavigation = createStackNavigator({
  Main: {
    screen: HomePage
  },
  Post: {
    screen: PostPage,
  }
}, {
  initialRouteName: 'Main'
});

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

重点就在于这段话

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

当导航器的index大于0(处于子页面时)就会隐藏父级的tabbar!

参考资料
github: react-navigation-issues-464
react-navigation-document: A tab navigator contains a stack and you want to hide the tab bar on specific screens