最近在研究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',
];
至于代码的架构就需要大家各自处理了。
参考资料如下：
如果有更好的处理方法，请大家及时告知我谢谢。
