![](/img/trans.png)
[英]Inside React Native <Navigator/>, how do I reference the current route.name being passed in?
[英]React Native: How to reference current route in Navigator's navigationBar={}?
根据当前的路线,我试图更改以下样式,但收到错误:'路线未定义'。 如何引用当前路由:navigationBar = {}中的route.name?
<Navigator
configureScene={...}
initialRoute={...}
renderScene={...}
navigationBar={<Navigator.NavigationBar style={route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar} .../>}
/>
UPDATE
这是我在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
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}
/>
}
/>
)
}
}
它是一个数组,只是从堆栈中弹出最后一个。
var currentRoute = navigator.getCurrentRoutes().pop();
Navigator.getCurrentRoutes克隆routes数组,因此你不能通过pop
一些东西来销毁它。
您可以像这样设置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} .../>}
/>
);
}
上面的函数返回路由数组,该数组中的最后一个元素将是您当前的路由。
希望有所帮助。
我使用navigator.jumpTo()
来遍历路由,因此navigator.getCurrentRoutes()
返回了我可用的最后一条路线,而不是当前路线。
为了获得当前路由,我使用了navigator.navigationContext.currentRoute
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.