signed

QiShunwang

“诚信为本、客户至上”

react native+typescript创建移动端项目-(慕课网喜马拉雅项目笔记)-(二,底部标签导航器)

2021/4/26 15:04:52   来源:

一,基本安装

官网地址:https://reactnavigation.org/docs/tab-based-navigation
安装:

npm install @react-navigation/bottom-tabs

二,tab导航器的代码

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '@/pages/Home';
import Account from '@/pages/Account';
import Found from '@/pages/Found';
import Listen from '@/pages/Listen';
//从tab导航器的包中引入这个函数,返回一个对象,此对象中有两个属性,Stack.Navigator和Stack.Screen
export type BottomTabParamList = {
  Home: undefined;
  Listen: undefined;
  Found: undefined;
  Account: undefined;
};
const Tab = createBottomTabNavigator<BottomTabParamList>();
class BottomTabs extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Home" component={Home} />
          <Tab.Screen name="Account" component={Account} />
          <Tab.Screen name="Found" component={Found} />
          <Tab.Screen name="Listen" component={Listen} />
        </Tab.Navigator>
      </NavigationContainer>
    );
  }
}
export default BottomTabs;

然后新建四个页面组件:
在这里插入图片描述
实现效果:
在这里插入图片描述

三,配置样式

在这里插入图片描述

四,同时使用堆栈式导航器和标签式导航器

实现方式就是将堆栈式导航器嵌套到标签导航器之中。
在这里插入图片描述
但是这样造成的结果就是,首页其实是先引入堆栈导航器,然后堆栈导航器显示第一个页面,就是Home页面。
然而一旦点击详情,底部的标签导航器就会自动跳转到首页并且不会消失,这就不可行。
于是改用堆栈导航器嵌套标签导航器。
在这里插入图片描述
这样一来,就是先展示堆栈导航器的首页,并且这个首页上有一个标签导航器,就是底部的四个tab,点击tab,可以完成在首页上的四个tab切换,点击详情,进入详情页后,因为不具备标签导航器了,底部四个Tab消失。

1,更改为点击tab,首页的标题栏发生变化

其实现在的这个首页,显示的就是这个堆栈导航器的这个属性,而正常的话,是要显示tab的导航名字的,所以这里可以把这个删除(不删除应该也没问题),然后再在tab导航点击的时候,把对应组件的名字赋值给它,就可以实现点击底部,首页堆栈组件的顶部显示不同的title。
在这里插入图片描述

2,bottomTabs使用函数和生命周期函数进行修改

在这里插入图片描述