React Navigation 5.x BottomTab 使用

底部Tab导航

基本使用

导入

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

使用方式和Stack类似

    const RootTab = createBottomTabNavigator();
    return (
        
            
            
        
    )

• screenOptionss ,tabBarOptions 在这里可以对底部导航进行整体的一个属性控制

    const screenOptionss = ({ route }) => {
        return {
            tabBarIcon: ({ focused, color, size }) => {
                let img = require('./mine.png')
                //根据组件名称加载不同的图片
                if (route.name == "Home") {
                    img = require('./mine.png')
                } else {
                    img = require('./message.png')
                }
                //可以返回任何组件
                return 
            },
        }
    }

    //文本选中和非选中颜色 不会影响icon
    const tabBarOptions = {
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
    }

内嵌StackNavigator

一般tab都和stack结合使用，大多数从tab页跳转到其他页面需要隐藏tab底部栏，官方推荐tab嵌入到stack中

    return (
        
            { 
            
                
                
                
            
        
    )

HomeTab

function HomeTab(params) {
    const RootTab = createBottomTabNavigator();
    //.... 
    return (
        
            
            
        
    )
}

这样在HomeTab内嵌入stack中，所以在切换页面的时候还需要处理下导航栏（各个Tab页面共用的一个导航栏）
如下监听点击tab事件 改变标题 （这里使用dangerouslyGetParent()来获取stack的navigation）

class Setting extends Component {
   //...
    componentDidMount() {
        //监听点击tab事件 改变标题
        this.unsubscribe = this.props.navigation.addListener('tabPress', e => {
            // Prevent default action
            this.props.navigation.dangerouslyGetParent().setOptions({title:"设置"})
          });
    }
    componentWillUnmount(){
        this.unsubscribe ();
    } 
    //...
 }