最近在研究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,一定要在你創(chuàng)建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關于這個問題處理的鏈接

如果有更好的處理方法，請大家及時告知我謝謝。