React-Navigation tabBarVisible的正确用法

最近在研究React-Native,在使用facebook的框架React-Navigation的时候，隐藏Tabbar遇到了问题。

• 谷歌的API上在navigationOpions中的参数说明tabBarVisible是个布尔值的变量，只要把该变量置为false就可以隐藏导航。但是貌似并没有那么简单

• 我的界面框架是TabbarNavigation=>StackNavigation用下图说明

  
  
  屏幕快照 2018-05-10 下午4.18.04.png

• React-Navigation 的安装方式 npm install react-navigation --save,一定要在你创建React项目的根目录下安装

• 以上就是我的需求和问题，废话不多说直接上demo代码吧

import React from 'react';
import { View, Text, TouchableOpacity ,YellowBox} from 'react-native';

import {
    createStackNavigator,
    createBottomTabNavigator,
} from 'react-navigation';

const HomeScreen = ({ navigation: { push } }) => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity
            onPress={() => push('HomeDetail', { id: Math.round(Math.random() * 10) })}>
            <Text>Open HomeDetail Screen</Text>
        </TouchableOpacity>
    </View>
);

const HomeDetailScreen = () => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{ color: 'red', marginBottom: 20, fontWeight: 'bold' }}>
            HomeDetail Screen
        </Text>
    </View>
);

const HomeStack = createStackNavigator({
    Home: { screen: HomeScreen, navigationOptions: { title: 'Home' } },
    HomeDetail: {
        screen: HomeDetailScreen,
        navigationOptions: { title: 'HomeDetail' },
    },
});

HomeStack.navigationOptions = ({ navigation }) => {
    return {
        tabBarVisible: navigation.state.index === 0,
    };
};

const Navigator = createBottomTabNavigator({
    Home: HomeStack,
});

export default () => <Navigator />;

console.ignoredYellowBox = [
    'Warning: componentWillMount',
    'Warning: componentWillReceiveProps',
    'Warning: componentWillUpdate',
];

至于代码的架构就需要大家各自处理了。

参考资料如下：

• github关于这个问题处理的链接

如果有更好的处理方法，请大家及时告知我谢谢。