[英]React Native: How to reference current route in Navigator's navigationBar={}?
Depending on which current route, I am trying to change up styles like the following, but getting an error: 'route is not defined'. 根据当前的路线,我试图更改以下样式,但收到错误:'路线未定义'。 How can I go about referencing the current route: route.name in the navigationBar={}? 如何引用当前路由:navigationBar = {}中的route.name?
<Navigator
configureScene={...}
initialRoute={...}
renderScene={...}
navigationBar={<Navigator.NavigationBar style={route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar} .../>}
/>
UPDATE UPDATE
Here is my current set up in index.ios.js
: 这是我在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}
/>
}
/>
);
}
}
UPDATE UPDATE
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}
/>
}
/>
)
}
}
It is an array, just pop the last one off the stack. 它是一个数组,只是从堆栈中弹出最后一个。
var currentRoute = navigator.getCurrentRoutes().pop();
Navigator.getCurrentRoutes clones the routes array so you can't destroy it by pop
'ing something off it. Navigator.getCurrentRoutes克隆routes数组,因此你不能通过pop
一些东西来销毁它。
You can set reference of Navigator like this 您可以像这样设置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} .../>}
/>
);
}
Above function returns array of routes, last element in that array will be your current route. 上面的函数返回路由数组,该数组中的最后一个元素将是您当前的路由。
Hope that helps. 希望有所帮助。
I use navigator.jumpTo()
to move through routes, so navigator.getCurrentRoutes()
returned the last of my available routes, rather than the current route. 我使用navigator.jumpTo()
来遍历路由,因此navigator.getCurrentRoutes()
返回了我可用的最后一条路线,而不是当前路线。
To get the current route, I used navigator.navigationContext.currentRoute
为了获得当前路由,我使用了navigator.navigationContext.currentRoute
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.