admin管理员组文章数量:1332107
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={}?
<Navigator
configureScene={...}
initialRoute={...}
renderScene={...}
navigationBar={<Navigator.NavigationBar style={route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar} .../>}
/>
UPDATE
Here is my current set up in index.ios.js
:
class practice extends Component {
constructor(){
super()
}
renderScene(route, navigator){
return (
<routeponent navigator={navigator} {...route.passProps}/>
)
}
configureScene(route, routeStack) {...}
render() {
return (
<Navigator
configureScene={this.configureScene}
initialRoute={{name: 'Login', ponent: 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
class practice_style extends Component{
renderScene(route, navigator){
this._navigator = navigator
return (
<routeponent 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', ponent: Home}}
renderScene={(route, navigator) => this.renderScene(route, navigator)}
style={styles.container}
navigationBar={
<Navigator.NavigationBar
style={route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar}
routeMapper={NavigationBarRouteMapper}
/>
}
/>
)
}
}
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={}?
<Navigator
configureScene={...}
initialRoute={...}
renderScene={...}
navigationBar={<Navigator.NavigationBar style={route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar} .../>}
/>
UPDATE
Here is my current set up in index.ios.js
:
class practice extends Component {
constructor(){
super()
}
renderScene(route, navigator){
return (
<route.ponent navigator={navigator} {...route.passProps}/>
)
}
configureScene(route, routeStack) {...}
render() {
return (
<Navigator
configureScene={this.configureScene}
initialRoute={{name: 'Login', ponent: 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
class practice_style extends Component{
renderScene(route, navigator){
this._navigator = navigator
return (
<route.ponent 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', ponent: Home}}
renderScene={(route, navigator) => this.renderScene(route, navigator)}
style={styles.container}
navigationBar={
<Navigator.NavigationBar
style={route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar}
routeMapper={NavigationBarRouteMapper}
/>
}
/>
)
}
}
Share
Improve this question
edited Jul 27, 2016 at 18:55
Jo Ko
asked Jul 24, 2016 at 20:39
Jo KoJo Ko
7,57516 gold badges69 silver badges128 bronze badges
3 Answers
Reset to default 6It 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.
You can set reference of Navigator like this
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.
To get the current route, I used navigator.navigationContext.currentRoute
本文标签: javascriptReact Native How to reference current route in Navigator39s navigationBarStack Overflow
版权声明:本文标题:javascript - React Native: How to reference current route in Navigator's navigationBar={}? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742257848a2441956.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论