设计思路:
按照
原生的开发
经验,一般项目的架构模式都是:
先以tabBar作为根,tabBar之下再放置navigationBar
.
但是
React Native
却相反.
是先以navigationBar作为根,navigationBar之下再放置tabBar
.这样的话push到二级界面就会自动隐藏tabBar了
如果第二级页面还需要使用tabbar,就在第二级页面下面再次申明
TabNavigator的用法
1、导入react-nativigation :
npm install --save react-navigation
2、使用 react-native-tab-navigator
传送门:react-native-tab-navigator
3、注册StackNavigator:
import { StackNavigator } from 'react-navigation';
import TabNavigator from 'react-native-tab-navigator';
//导航栏选择
const AppNavigation = StackNavigator({
Main:{screen:MainScreen},
Profile:{screen:ProfileScreen}
},{
initialRouteName:'Main',
onTransitionStart:()=>{console.log('Start~~~');},
onTransitionEnd:()=>{console.log('end~~~');}
});
//在App的注册中注册导航栏选择
type Props = {};
export default class App extends Component<Props> {
constructor(props){
super(props);
this.state={
};
}
render() {
return (
<AppNavigation />
);
}
}
4、比如:在MainScreen 组件中render部分使用tabbar:
<TabNavigator
tabBarStyle={{height:this.state.tabBarHeight,overflow:this.state.overflow}}
sceneStyle = {{paddingBottom:this.state.tabBarHeight}}
>
<TabNavigator.Item
selected={this.state.selectedTab === 'Mymain'}
title="Mymain"
renderIcon={() => <Image source={require('./imgs/children_tab.png')} />}
renderSelectedIcon={() => <Image source={require('./imgs/children_tab_sel.png')} />}
// badgeText="1" //提示的文字 比如未读消息等等
onPress={() => this.setState({ selectedTab: 'Mymain' })}>
<WFFlatList />
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'HomePageScreen'}
title="WFFlatList"
renderIcon={() => <Image source={require('./imgs/me_tab.png')} />}
renderSelectedIcon={() => <Image source={require('./imgs/me_tab_sel.png')} />}
// renderBadge={() => <CustomBadgeView />}
onPress={() => {this.setState({ selectedTab: 'HomePageScreen' }), this.onMYchangeNavigationTitle('WFFWWW')}}>
<WFFlatList />
</TabNavigator.Item>
</TabNavigator>
//TabNavigator另一种隐藏方法
// let tabBarHeight = 0;
// <TabNavigator
// tabBarStyle={{ height: tabBarHeight, overflow: 'hidden' }}
// sceneStyle={{ paddingBottom: tabBarHeight }}
// />