(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 }}
  // />


### 如何在 React Native 中自定义 TabBar 的高度 #### 方法一:使用 `style` 属性调整 TabBar 高度 对于基础的 `react-native-tabbar` 组件,可以通过传递给 `<TabBar>` 组件一个带有 `height` 值的对象来修改其样式属性。这允许开发者精确控制 TabBar 所占用的空间大小。 ```jsx <TabBar tabs={tabs} selectedTab={0} onTabPress={(index) => console.log(`Tab ${index} pressed`)} style={{ height: 70 }} // 设置 TabBar 的高度为 70px /> ``` 此方式简单直接,适用于大多数场景下的快速定制需求[^1]。 #### 方法二:利用第三方库扩展功能 当需要更复杂的自定义效果时,可以考虑采用专门设计用于增强 TabBar 功能性的第三方库,比如 `@gorhom/animated-tabbar` 或者 `react-native-scrollable-tab-view`。这些库通常提供了更多配置选项以便于深入定制界面元素,包括但不限于改变整个底部导航栏的高度。 以 `@gorhom/animated-tabbar` 为例,在完成安装之后,可以在创建 TabBar 实例时指定 `containerStyle` 来设定具体尺寸: ```jsx import AnimatedTabBar from '@gorhom/animated-tabbar'; // ... <AnimatedTabBar containerStyle={{ position: 'absolute', bottom: 0, left: 0, right: 0, borderTopWidth: 0.5, backgroundColor: '#fff', shadowOffset: { width: 0, height: -3 }, shadowOpacity: 0.1, shadowRadius: 3, elevation: 5, height: 80, // 设定更高的 TabBar }} sceneContainerStyle={{ paddingBottom: 80, // 确保页面内容不会被遮挡 }} state={navigationState} descriptors={descriptors} navigationState={state} renderIcon={({ focused, color }) => <Image source={focused ? activeIcon : inactiveIcon} /> } /> ``` 这种方法不仅能够自由调节 TabBar 的外观参数,还可以配合动画过渡等高级特性一起工作,从而提供更加流畅自然的操作体验[^3]。 #### 方法三:基于官方推荐方案——`createBottomTabNavigator` 如果正在构建的应用程序依赖于 React Navigation 库,则建议遵循官方文档中的指导方针来进行开发。针对 TabBar 调整而言,主要涉及两个方面的工作:一是通过 `screenOptions` 对象内的 `tabBarStyle` 字段指明全局样式的更改;二是确保各个子页面留有足够的空间以免受到新尺寸的影响。 下面是一段示范代码片段展示了如何操作: ```javascript const MyTabs = createBottomTabNavigator( { Home: HomeScreen, Settings: SettingsScreen, }, { screenOptions: ({ route }) => ({ tabBarIcon: ({ focused, color, size }) => { let iconName; if (route.name === 'Home') { iconName = focused ? 'ios-home' : 'ios-home-outline'; } else if (route.name === 'Settings') { iconName = focused ? 'ios-settings' : 'ios-settings-outline'; } return ( <Ionicons name={iconName} size={size} color={color} /> ); }, }), tabBarOptions: { activeTintColor: 'tomato', inactiveTintColor: 'gray', style: { height: 90, // 修改此处数值可改变 TabBar 显示区域的高度 }, }, } ); ``` 上述做法既保持了与现有生态系统的兼容性,又实现了预期的功能目标[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值