[英]React Native Navigator Route Object is Undefined
Why am I getting an error that route
is undefined
in my React Native Navigator component? 为什么我在React Native Navigator组件中收到
undefined
route
的错误提示? I thought I was pushing the correct information but I guess not? 我以为我在推送正确的信息,但我猜不是吗? Any help would be appreciated.
任何帮助,将不胜感激。 I'm used to working with the web so React Native is quite the shift.
我习惯于使用网络,因此React Native确实是一种转变。
So... 所以...
I want to navigate from my SplashContainer
component to my SignUpForm
component. 我想从
SplashContainer
组件导航到SignUpForm
组件。 So in SplashContainer
I do this... 所以我在
SplashContainer
执行此操作...
class SplashContainer extends Component {
handleLoginFinished = () => {
this.props.dispatch(handleAuthWithFirebase())
}
handleToSignUp = () => {
this.props.navigator.push({
signUpForm: true
});
}
handleToSignIn = () => {
this.props.navigator.push({
signIn: true
})
}
render () {
return (
<Splash onLoginFinished={this.handleLoginFinished} goToSignUp={this.handleToSignUp} goToSignIn={this.handleToSignIn} />
)
}
}
export default connect()(SplashContainer)
Then in the React Native Navigator I do this... 然后在React Native Navigator中执行此操作...
export default class NimbusNavigator extends Component {
static propTypes = {
isAuthed: PropTypes.bool.isRequired
}
renderScene = (route, navigator) => {
// Keeps track of whether user is Authed or not.
if (this.props.isAuthed === false) {
return <SplashContainer navigator={navigator}/>
} else if (route.signUpForm === true) {
return <SignUpForm navigator={navigator}/>
}
return <FooterTabsContainer navigator={navigator} />
}
configureScene = (route) => {
}
render () {
return (
<Navigator
configureScene={this.configureScene}
renderScene={this.renderScene}
/>
)
}
}
The route is undefined at start because you didn't give the Navigator
any initial routes . 开始时未定义路线,因为您没有给
Navigator
任何初始路线 。 You want to set either of the props initialRoute or initialRouteStack . 您想设置props的initialRoute或initialRouteStack 。
Assuming you want to start at a route with the name HOME, here's an example where the route { name: 'HOME' }
is defined inline: 假设您想从名称为HOME的路由开始,下面是一个示例,其中的路由
{ name: 'HOME' }
是内联定义的:
render () {
return (
<Navigator
initialRoute={{ name: 'HOME' }}
configureScene={this.configureScene}
renderScene={this.renderScene}
/>
)
}
Normally the navigation is set up like this: 通常,导航设置如下:
handleToSignUp = () => {
this.props.navigator.push({
name: 'signUpForm'
});
}
// //
renderScene = (route, navigator) => {
// Keeps track of whether user is Authed or not.
if (this.props.isAuthed === false) {
return <SplashContainer navigator={navigator}/>
} else if (route.name === 'signUpForm') {
return <SignUpForm navigator={navigator}/>
}
return <FooterTabsContainer navigator={navigator} />
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.