react native navigation 隐藏 bottomTab

最新推荐文章于 2024-03-15 11:32:25 发布

Fanstorm丶

最新推荐文章于 2024-03-15 11:32:25 发布

阅读量1.5k

点赞数

分类专栏： react-native 文章标签： navigation hide 隐藏 rn react-native

本文链接：https://blog.csdn.net/wf824284257/article/details/103650583

版权

本文介绍了如何在react-native应用中使用react-navigation时，动态控制底部tab导航栏（bottomTab）的隐藏和显示。通过修改`createBottomTabNavigator.js`源码，在组件挂载后将底部tab的显示状态绑定到全局函数，从而在项目任意位置通过调用全局函数实现底部tab的控制。

摘要由CSDN通过智能技术生成

react native navigation 隐藏 bottomTab

前言

在做 react-native app 时，用到了 react navigation 的 bottom tab navigation，但是在某些情况下需要控制 bottom tab bar 的显示和隐藏。

试了很多中方法，最后比较简单的方式是修改nodeModels里面的源码。

本文 react-native 版本为 0.59.8 ， react-navigation 版本为 3.10.1

开始

核心思想是从 nodemodels 中找到渲染 bottom tab 的代码，直接的来控制它的显示隐藏。

找到代码文件为 nodemodels的 react-navigation-tabs/src/navigators/createBottomTabNavigator.js

为该文件中的类添加 state hidden=false；

在该类的 componentDidMount 中，将hidden值的控制权挂到 global.func上，

componentDidMount() {
    global.func.showBottomTab = () => {
    this.setState({
        hidden: false
    })
    }
    global.func.hideBottomTab = () => {
    this.setState({
        hidden: true
    })
    }
}

在该类的 render 中，判断 this.state.hidden,