在 react native 中使用的前导航中将动态标题传递给路由

Question

>我正在使用单个组件来处理多个任务(例如，带食物/打扫房间(。我将任务标题作为道具传递给组件，并相应地呈现。此组件将使用不同的 props 多次调用。我正在使用 ex-navigation 在我的任务组件中呈现我的导航栏，如下所示：

    static route = {
      navigationBar: {
        backgroundColor: '#0096ff',
        tintColor: '#fff',
        title: 'Clean' //Need to do make this dynamic based on props value
      }
    } 

现在我希望标题是动态的，并使用来自道具的值(title：this.props.title(。现在，由于这是一个静态变量，我如何在静态路由变量中使用 props 值(仅在构造函数初始化后出现(来根据传递给组件的 props 使我的标题动态化。

Answer 1

导航栏中title属性可以是接收参数作为参数的function

title(params) {
        return `Greeting for ${params.name}`;
      },

检查 https://github.com/exponent/ex-navigation#passing-params-to-a-route了解更多方式

Answer 2

如果您使用的是 redux 并且已经配置了 ex-navigator 来使用它，您应该将 navigator 作为道具。当您推送主路线时，您可以传递所需的标题：

this.props.navigator.push(Router.getRoute('MainRoute', {title: 'WhateverYouWant'}))

由于这是您的主要路线，您将重复使用它，因此您可以更新标题udateCurrentRouteParams()。

     this.props.navigator.updateCurrentRouteParams({
      title: 'NewTitle',
    })