React Native：如何在 Navigator 的 navigationBar= 中引用当前路线？

Posted 2023-03-15

【中文标题】React Native：如何在 Navigator 的 navigationBar= 中引用当前路线？

【英文标题】：React Native: How to reference current route in Navigator's navigationBar=?React Native：如何在 Navigator 的 navigationBar= 中引用当前路线？

【发布时间】：2016-07-24 20:39:04

【问题描述】：

根据当前的路线，我正在尝试更改如下样式，但出现错误：“路线未定义”。如何引用当前路由：navigationBar= 中的 route.name？

<Navigator
 configureScene=...
 initialRoute=...
 renderScene=...
navigationBar=<Navigator.NavigationBar style=route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar .../>
/>

更新

这是我目前在index.ios.js 中的设置：

class practice extends Component 
  constructor()
    super()
  

  renderScene(route, navigator)
    return (
        <route.component navigator=navigator ...route.passProps/>
    )
  

  configureScene(route, routeStack) ...

  render() 
    return (
        <Navigator
          configureScene=this.configureScene
          initialRoute=name: 'Login', component: Login
          renderScene=(route, navigator) => this.renderScene(route, navigator)
          style=styles.container
          navigationBar=
            <Navigator.NavigationBar
              style=route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar //This is what I am trying to achieve
              routeMapper=NavigationBarRouteMapper
            />
          
        />
    );
  

更新

class practice_style extends Component

  renderScene(route, navigator)
    this._navigator = navigator

    return (
        <route.component navigator=navigator ...route.passProps/>
    )
  

  configureScene(route, routeStack) ...

  getNav = () => 
    return this._navigator
  

  render() 
    const routes = this.navigator.getCurrentRoutes();
    route = routes[routes.length-1];

    return (
        <Navigator
          configureScene=this.configureScene
          initialRoute=name: 'Home', component: Home
          renderScene=(route, navigator) => this.renderScene(route, navigator)
          style=styles.container
          navigationBar=
            <Navigator.NavigationBar
              style=route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar
              routeMapper=NavigationBarRouteMapper
            />
          
        />
        )
    

【参考方案1】：

它是一个数组，只需将最后一个从堆栈中弹出即可。

var currentRoute = navigator.getCurrentRoutes().pop();

Navigator.getCurrentRoutes 克隆了 routes 数组，所以你不能通过 pop'ing 来破坏它。

【参考方案2】：

你可以像这样设置导航器的引用

 render () 
   //To access route
   var routeName;
   if(this.navigator) 
      const routes = this.navigator.getCurrentRoutes();
      routeName = routes[routes.length-1].name;
   

   return (
    <Navigator
     configureScene=...
     initialRoute=...
     renderScene=...
     ref=(nav) => this.navigator = nav
     navigationBar=<Navigator.NavigationBar 
       style=routeName == 'Home' ? styles.homeNavBar : styles.normalNavBar .../>
    />
 );

上述函数返回路线数组，该数组中的最后一个元素将是您当前的路线。

希望对您有所帮助。

【讨论】：

很抱歉，但想弄清楚如何让它发挥作用。我如何将它整合到我想要实现的目标中？谢谢！

感谢您的快速响应！我在原始帖子中进行了更新。请看一下。所以我试图在重新渲染时获取route.name，并基于route.name为navigationBar = 显示不同的样式，所以styles.homeNav或styles.normalNavBar。相关的是，我应该将const routes = this.navigator.getCurrentRoutes(); route = routes[routes.length-1]; 放在哪里以及ref 如何帮助实现我的意图？谢谢阿布舍克！

只是检查你是否看到了我之前的评论。请告诉我！

这个const routes = this.navigator.getCurrentRoutes()是访问当前路由。所以你可以访问route.name。你必须在 return();

之前把它放在渲染函数中

如果它不起作用，您可以在rnplay重新创建它

【参考方案3】：

我使用navigator.jumpTo() 在路线中移动，所以navigator.getCurrentRoutes() 返回了我最后一条可用路线，而不是当前路线。

为了获取当前路线，我使用了navigator.navigationContext.currentRoute