react-native - 从 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 组件上的右键导航到新场景。

我错过了什么？

非常感谢您的帮助，Ijonas。

更新

在 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

在文档中它说：

它 [navigator] 作为道具传递给 NavigatorIOS 呈现的任何组件。

我认为这意味着NavigatorIOS 的任何子级，而在您的示例中，您实际上将 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,
        }}
      />    
    )
  }
})

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