Question

根据当前路线的不同，我正在尝试更改以下类型，但收到错误：“路线未定义”。如何在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}
            />
          }
        />
        )
    }
}

Answer 1

这是一个数组，只是从堆栈中弹出最后一个。

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

Navigator.getCurrentRoutes克隆routes数组，这样你就无法通过pop来删除它。

Answer 2

您可以像这样设置Navigator的引用

 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} .../>}
    />
 );
}

上面的函数返回路由数组，该数组中的最后一个元素将是你当前的路由。

希望有所帮助。

Answer 3

我使用navigator.jumpTo()来遍历路由，因此navigator.getCurrentRoutes()返回了我可用的最后一条路线，而不是当前路线。

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

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

3 个答案: