I am very very knew to React Native (and Stackoverflow) and I have been working on switching screens using the Navigator and I still have not been able to do so after researching for help for two days, so I finally resorted to posting a question. My code gives me an : "Undefined is not an object (evaluating this.props.navigator)" error and this is the code that I have:
A Navigator class:
import HomeScreen from './HomeScreen';
import LoginScreen from './LoginScreen'
export default class Navigation extends Component {
render() {
return (
<Navigator
initialRoute={{id:"Login"}}
renderScene={(route, navigator) =>
{return this.renderScene(route, navigator)}}
/>
);
}
renderScene(route, navigator) {
switch(route.id) {
case "Login":
return (<LoginScreen {...route.passProps} navigator={navigator}/>);
case "Home":
return (<HomeScreen {...route.passProps} navigator={navigator}/>);
}
}
}
and a LoginButton component in a LoginScreen.js file
class LoginButton extends Component {
render() {
const routes = [{id:'LoginScreen'},{id:'HomeScreen'}];
return (
<View style={{height:50}}>
<Container>
<Content>
<Button style={{backgroundColor: '#eeb211'}} onPress={this.nextScreen.bind(this)} rounded > Login Next Screen </Button>
</Content>
</Container>
</View>
);
}
nextScreen() {
this.props.navigator.push({id:"Home"})
}
}
Try Following:
<Navigator
style={{ flex:1 }}
ref={(nav) => { navigator = nav; }}
initialRoute={{id:"Login"}}
renderScene={(route, navigator) =>
{return this.renderScene(route, navigator)}}
/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.