Question

我是新来的反应原生，标题可能不清楚。

问题：无法在下面this.props.navigator.push功能中使用checkLoggedInToken()。它说this.props.navigator is undefined但我可以在Login和Signup组件中使用相同的功能。

问题：可能我无法在此主路线类中访问类似的导航器。这样做的正确方法是什么？

以下是我的简化代码

class AwesomeProject extends Component {

  constructor(props){
    super(props);
    this.state = {
      loaded: false
    };
    this.checkLoggedInToken();
  }

  renderScene(route, navigator) {
    if(route.id === "Signup"){
      return <Signup navigator={navigator} />
    }

    if(route.id === "Login"){
      return <Login navigator={navigator} />
    }
  }

  render() {
      return (
        <Navigator
          style={ styles.container }
          renderScene={ this.renderScene }
          initialRoute={{ id : 'Signup' , name : 'SIGNUP' }} />
      );
  }

  checkLoggedInToken(){ //Check token online with the stored one that is it legal , not expired
    this.props.navigator.push({
      id: 'Home',
    });
  }

Answer 1

我认为你应该在renderScene中包含你的Home，并且应该在componentDidMount函数中调用函数checkLoggedInToken。

class AwesomeProject extends Component {

  constructor(props){
    super(props);
    this.state = {
      loaded: false
    };
  }

  componentDidMount() {
    this.checkLoggedInToken();
  }

  renderScene(route, navigator) {
    if(route.id === "Signup"){
      return <Signup navigator={navigator} />
    }

    if(route.id === "Login"){
      return <Login navigator={navigator} />
    }

    if (route.id === "Home") {
      return <Home navigator={navigator} />
    }
  }

  render() {
      return (
        <Navigator
          ref={(navigator) => this.navigator = navigator}
          style={ styles.container }
          renderScene={ this.renderScene }
          initialRoute={{ id : 'Signup' , name : 'SIGNUP' }} />
      );
  }

  checkLoggedInToken(){ //Check token online with the stored one that is it legal , not expired
    this.navigator.push({
      id: 'Home',
    });
  }
}

Answer 2

我认为......为了在函数checkLoggedInToken（）中访问导航器。你必须使用refs引用导航器。

你的render（）应该是这样的......

render(){
  return (
    <Navigator
      ref={(ref) => this.navigator = ref}
      style={ styles.container }
      renderScene={ this.renderScene }
      initialRoute={{ id : 'Signup' , name : 'SIGNUP' }} />
  );
}

现在你可以在checkLoggedInToken（）函数中访问导航器..

checkLoggedInToken(){
  this.navigator.push({
    id: 'Home',
  });
}

无法在主Route Component中使用navigator.push

2 个答案: