从 NavigatorIOS.onRightButtonPress 内部访问 this.props.navigator

Question

我正在努力处理 NavigatorIOS 组件上的 'onRightButtonPress' 事件。处理程序似乎没有得到 this.props.navigator.

的引用

var CBSupport  = React.createClass({

  _handleNextButtonPress: function() {
    debugger
    AlertIOS.alert("Be A Lert");
    // this.props does not contain a 'navigator' property
    this.props.navigator.push({
          component: Login,
          title: 'Login'
    });
  },

  render: function() {
    return(
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          component: Accounts,
          title: 'Accounts',
          rightButtonTitle: 'Add',
          onRightButtonPress: this._handleNextButtonPress,
        }}
      />    
    )
  }
})

我可能做错了什么，但我正在尝试通过点击 NavigatorIOS 组件上的右键导航到新场景。

我错过了什么？

非常感谢您的帮助，伊约纳斯

更新

在 Colin Ramsay 下面的使用 refs 的建议之后，我得到了以下适合我的解决方案：

var CBSupport  = React.createClass({

  _handleNextButtonPress: function() {
    this.refs.nav.push({
          component: Login,
          title: 'Login'
    });
  },

  render: function() {
    return(
      <NavigatorIOS
        ref="nav"
        style={styles.container}
        initialRoute={{
          component: Accounts,
          title: 'Accounts',
          rightButtonTitle: 'Add',
          onRightButtonPress: this._handleNextButtonPress,
        }}
      />    
    )
  }
})

非常感谢科林。

Answer 1

文档中说：

It [navigator] is passed as a prop to any component rendered by NavigatorIOS.

我认为这是指 NavigatorIOS 的任何 child，而在您的示例中，您实际上将 NavigatorIOS 作为 CBSupport 组件的子组件。然而，另一种方法可能是这样做：

var CBSupport  = React.createClass({

  _handleNextButtonPress: function() {

    // Get by ref not prop
    this.refs.nav.push({
          component: Login,
          title: 'Login'
    });
  },

  render: function() {
    return(
      <NavigatorIOS
        style={styles.container},
        ref: 'nav', // added this
        initialRoute={{
          component: Accounts,
          title: 'Accounts',
          rightButtonTitle: 'Add',
          onRightButtonPress: this._handleNextButtonPress,
        }}
      />    
    )
  }
})

请注意，我已将值为 "nav" 的 ref 添加到 NavigatorIOS，我们可以使用它在您的事件处理程序中获取它。因为所有 Navigator 方法在 NavigatorIOS 上也自动可用，这应该使您能够根据需要调用 push。

从 NavigatorIOS.onRightButtonPress 内部访问 this.props.navigator

Getting access to this.props.navigator from inside NavigatorIOS.onRightButtonPress

react-native