最近在嘗試著開發(fā)react-native項(xiàng)目, 其中使用到了官方現(xiàn)在推薦的react-navigation插件.現(xiàn)在頁(yè)面上有個(gè)需求, 就是在每個(gè)有tab頁(yè)面的子頁(yè)面上不能有底部的tabbar, 經(jīng)過(guò)查找 github和react-navigation的官方文檔終于找到了一種可用的解決方案.
這是程序的入口文件, 整個(gè)tab導(dǎo)航器的所有子頁(yè)面都是一個(gè)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'
});
以其中的一個(gè)HomeNavigation舉例, 假如這個(gè)導(dǎo)航器中有兩個(gè)頁(yè)面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,
};
};
重點(diǎn)就在于這段話
HomeNavigation.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;
}
return {
tabBarVisible,
};
};
當(dāng)導(dǎo)航器的index大于0(處于子頁(yè)面時(shí))就會(huì)隱藏父級(jí)的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
