Question

我正在努力与onRightButtonPress＆＃39; NavigatorIOS组件上的事件。处理程序似乎没有得到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]作为prop传递给任何渲染的组件 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,
        }}
      />    
    )
  }
})

请注意，我添加了一个值为＆＃34; nav＆＃34;到NavigatorIOS，我们可以使用它来在事件处理程序中获取它。由于NavigatorIOS上的所有Navigator方法也可自动使用，因此您可以根据需要调用push。

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

1 个答案: