(ReactNative) Tabbar + StackNavigator 的使用

最新推荐文章于 2020-04-17 19:32:35 发布

原创最新推荐文章于 2020-04-17 19:32:35 发布 · 669 阅读

0 ·

CC 4.0 BY-SA版权

ReactNative 专栏收录该内容

1 篇文章

订阅专栏

设计思路：

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