(ReactNative) Tabbar + StackNavigator 的使用

设计思路:


按照原生的开发经验,一般项目的架构模式都是:先以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 }}
  // />


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页