专栏首页码生StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle 等

StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle 等

StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle 等

在 StackNavigator 控制下的所有界面均可以通过 this.props.navigation 获取到当前导航对象

当前导航对象下有我们常用的几个方法

例如:

const { navigate, state, setParams } = this.props.navigation;

本文章主要说明一下如何更改导航中的 headerLeft headerRight headerTitle 等

1. 首先稍微回忆一下如何设置当前界面的导航配置 (headerLeft headerRight headerTitle等)

static navigationOptions = ({navigation}) => {
        return {
            headerTitle: '个人信息',
            headerLeft:  null,
            headerRight: null,
            gesturesEnabled: false,
        }};

2. 更改导航配置

通过上面代码可以看到 setParams

它是一个 func

回想一下 this.props.navigation.state.params,与 setParams 是存在相似之处的。

对的,它与 setParams 刚好是对应起来的

当我们调用 this.props.navigation.setParams({}) 时,

static navigationOptions = ({navigation}) => {
        return {
            headerTitle: '个人信息',
            headerLeft:  null,
            headerRight: null,
            gesturesEnabled: false,
        }};

此代码会重新运行,会重新配置当前导航

3. 代码示例

static navigationOptions = ({navigation}) => {
        if (navigation.state.params.navigation) {
            return navigation.state.params.navigation
        }
        return {
            headerTitle: '个人信息',
        }};
 updateNavigation() {
        this.props.navigation.setParams({
            navigation: {
                headerTitle: "动态title",
            }
        });
    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • StackNavigator in react-navigation 传参

    使用上面的方法即可进行参数传递 但是我建议当想下一个界面传参数时,使用唯一字段标识

    onety码生
  • vue 参数变化页面不刷新

    http://localhost:8081/#/detail?id=1 http://localhost:8081/#/detail?id=2

    onety码生
  • Chrome浏览器最牛插件之一 Vimium

    常用使用:http://www.jianshu.com/p/2ac3c064ba9c

    onety码生
  • react-navigation的使用

    czjwarrior
  • react-navigation,刷新你的导航一、属性介绍二、案例

    在2017年1月,新开源的react-navigation库备受瞩目。它有类似于原生版性能的体验效果,可能会成为未来RN导航组件中的主力军。该库包含三类组件: ...

    谦谦君子修罗刀
  • 一行R代码实现繁琐的可视化

    大数据文摘
  • Appium+TestNG自动化测试环境搭建(Java版)

    一、安装配置 1、安装JDK,环境配置 2、ADT安装,环境配置 3、安装Node.js 下载地址:http://nodejs.org/download/ 安...

    腾讯移动品质中心TMQ
  • 一行R代码来实现繁琐的可视化

    本文作者: 唐源,目前就职于芝加哥一家创业公司,曾参与和创作过多个被广泛使用的 R 和 Python 开源项目,是 ggfortify,lfda,metric-...

    小莹莹
  • 【链安科技】无限授权转账漏洞

    Lightcoin 合约的 transferFrom() 函数,即授权转账函数,在执行完转账后本该修改授权金额,减去已转出部分金额。但这一步骤中把这授权账户地址...

    辉哥
  • 【Vuejs】301- Vue 3.0前的 TypeScript 最佳入门实践

    然鹅最近的一个项目中,是 TypeScript+ Vue,毛计喇,学之...…真香!

    pingan8787

扫码关注云+社区

领取腾讯云代金券