反应本机导航器"Undefined is not an object (evaluating this.props.navigator)"错误

Question

我对 React Native（和 Stackoverflow）非常熟悉，我一直在使用导航器切换屏幕，在研究两天寻求帮助后我仍然无法这样做，所以我终于求助于发布一个问题。我的代码给了我一个："未定义不是一个对象（评估this.props.navigator）"错误，这是我的代码：

导航器类：

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}/>);
    }
}
} 

和登录屏幕.js文件中的登录按钮组件

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"})
   }
}

Answer 1

尝试以下操作：

<Navigator
        style={{ flex:1 }}
        ref={(nav) => { navigator = nav; }}
        initialRoute={{id:"Login"}}
        renderScene={(route, navigator) =>
         {return this.renderScene(route, navigator)}}
      />