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 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

MapX中实现友好的交互

        MapX的标注,修改标注功能尽管都有,但都十分的难用,操作起来,用户体验非常糟糕。不光编程难以控制,操作起来也不方便:工具选择要不断的切换,移动...

21170
来自专栏IMWeb前端团队

一年前的焦点bug终于找到原因了, 图标文本对齐完美了~

? 正常来说点击可编辑框末尾空白,光标默认会闪烁在末尾 , 但是闪到了倒数第二个了....当时一直以为js有问题...压根没想到是一个top属性.... 虽然...

24390
来自专栏Petrichor的专栏

Jupyter

When attempt to download .ipynb file as .python file:

73530
来自专栏Coco的专栏

【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧

26050
来自专栏hbbliyong

Extjs 项目中常用的小技巧,也许你用得着(1)

我在项目中遇到的一些知识点: 1.在GridPanel中显示图片,效果 ? 对应的代码实现 { text: '是否启用...

36570
来自专栏优启梦

使用:before选择器给你的Logo添加扫光特效

在知更鸟大神的网站看到他的Begin主题Logo有扫光特效,看起来还是比较炫的。研究了一下,发现是用:before选择器实现的扫光效果,现在把代码甩出来,觉得好...

42160
来自专栏用户2442861的专栏

使用Tesseract-OCR训练文字识别记录

部分图片可能由于背景颜色关系,导致此张图片无法识别,可跳过继续下一张识别。

66510
来自专栏个人随笔

使用ListView控件展示数据

属性名称    说明 items   指定显示那种视图 View   指定显示那种视图 largelmagelist  大图标图像的imagelist控件 Sm...

31170
来自专栏Micro_awake web

HTML5语义化元素

语义化元素:有意义的元素。 对语义化的理解: 正确的标签做正确的事情; HTML5语义化元素让页面内容结构化清晰; 便于开发人员阅读,理解,维护; 搜索引擎爬虫...

26350
来自专栏Petrichor的专栏

图像处理: RGB颜色值 & 十六进制颜色码 速查表

23130

扫码关注云+社区

领取腾讯云代金券