Javascript 如何在react native中右键单击导航抽屉打开下一个屏幕？

我想在

react native中右键单击导航抽屉打开新屏幕。

在登录

submit

按钮上，我调用了以下代码：

Login.js

this.props.navigator.push({
          id: 'FirstScreen',
          title: 'First Screen',
          iconRight: 'map',
          rightPress: this.onPress, // method to redirect to second screen
          rightText: 'list',
          passProps: {
              api_token: this.state.login_token
            }
        });

//navigate to second screen
 onPress() {
  this.props.navigator.push({
        id: "SecondScreen",
        title: 'Second Screen',
  });
}

  _renderScene(route, navigator) {
        navigator.navigate = this.navigate;
            switch (route.id) {
                case ‘Login’:
                    return ( <Login navigator={navigator} {...route.passProps} />);
                case ‘FirstScreen’:
                    return ( <FirstScreen navigator={navigator} {...route.passProps} />);
                case 'SecondScreen':
                    return ( <SecondScreen navigator={navigator} {...route.passProps} />);
            }
        }

module.exports = function (scene) {
    var componentMap = {
        'Login': {
            title: 'Login',
            id: 'Login'
        },
        'FirstScreen': {
            title: 'First Screen',
            id: 'FirstScreen'
        },
        'SecondScreen': {
            title: 'Second Screen',
            id: 'SecondScreen'
        }
    }

    return componentMap[scene];
}

但我在这条线上遇到了错误

this.props.navigator.push({
            id: "SecondScreen",
            title: 'Second Screen',
      });

获取这些错误：

Undefined不是对象（正在计算'this.props.navigator'）

未处理的JS异常：undefined不是对象（正在评估） 'this.props.navigator'）

App.js

this.props.navigator.push({
          id: 'FirstScreen',
          title: 'First Screen',
          iconRight: 'map',
          rightPress: this.onPress, // method to redirect to second screen
          rightText: 'list',
          passProps: {
              api_token: this.state.login_token
            }
        });

//navigate to second screen
 onPress() {
  this.props.navigator.push({
        id: "SecondScreen",
        title: 'Second Screen',
  });
}

  _renderScene(route, navigator) {
        navigator.navigate = this.navigate;
            switch (route.id) {
                case ‘Login’:
                    return ( <Login navigator={navigator} {...route.passProps} />);
                case ‘FirstScreen’:
                    return ( <FirstScreen navigator={navigator} {...route.passProps} />);
                case 'SecondScreen':
                    return ( <SecondScreen navigator={navigator} {...route.passProps} />);
            }
        }

module.exports = function (scene) {
    var componentMap = {
        'Login': {
            title: 'Login',
            id: 'Login'
        },
        'FirstScreen': {
            title: 'First Screen',
            id: 'FirstScreen'
        },
        'SecondScreen': {
            title: 'Second Screen',
            id: 'SecondScreen'
        }
    }

    return componentMap[scene];
}

---

您只需在navigator中更改

这个.onPress

方法，如下所示，并删除行包含的

右键press

：

Login.js

this.props.navigator.push({
       id: 'FirstScreen',
          title: 'First Screen',
          iconRight: 'map',
          rightText: 'list',
          passProps: {
              api_token: this.state.login_token
            }
          });
          onPress: () => {
            this.props.navigator.push({
                id: "SecondScreen",
                title: 'Second Screen',
                iconRight: 'map',
                passProps: {
                    api_token: this.state.login_token,
                    username: this.state.username
                },

              });
           }
        });

---

你注册第二个屏幕了吗？我不知道你是如何导航的，但你可以看看我的另一本关于如何导航的书，也许这会帮助你解决问题。@Lian van der Vyver:是的。我在

App.js

中注册了第二个屏幕，如下所示：

return（）

您在注册的屏幕上的Id是什么？

Id:'SecondScreen'

这是为第二个屏幕注册的获取这些错误：

未定义的不是对象（评估'this.props.navigator'）

未处理的JS异常：未定义的不是对象（评估'this.props.navigator'）