Question

我的应用程序中有NavigatorIOS，我打开一个像这样的新页面，它运行正常：

  var createProgramRoute = {
    component: CreateProgramPage,
    title: "Create Program",
    rightButtonTitle: "Save",
    onRightButtonPress: () => {
      // This part needs to be handled in CreateProgramPage component
    },
    passProps: {},
  };
  props.navigator.push(createProgramRoute);

CreateProgramPage类就像这样

var CreateProgramPage = React.createClass({
  ...

  _onRightButtonClicked() {
    console.log("right button clicked")
  }

});

所以我想在点击NavigatorIOS的RightButton时调用 CreateProgramPage 的 _onRightButtonClicked（）。没有像这样的例子。他们在示例中的所有内容都是调用导航器的 pop（），并且就是这样。

Answer 1

一个。在初始组件中

this.props.navigator.push({
    title: 'title',
    component: MyComponent,
    rightButtonTitle: 'rightButton',
    passProps: {
        ref: (component) => {this.pushedComponent = component},
    },
    onRightButtonPress: () => {
        this.pushedComponent && this.pushedComponent.foo();
    },
});

B中。在推动组件中在推送的组件中替换onRightButtonPress func。

componentDidMount: function() {
    // get current route
    var route = this.props.navigator.navigationContext.currentRoute;
    // update onRightButtonPress func
    route.onRightButtonPress =  () => {
        this._onRightButtonClicked();
    };
    // component will not rerender
    this.props.navigator.replace(route);
},

Answer 2

我的建议是使用某种Flux实现和可以从任何地方调用的动作。

我个人最喜欢的是Redux：https://github.com/gaearon/react-redux

即将发布的1.0版本的文档非常精彩。 http://gaearon.github.io/redux/

在打开的组件中处理NavigatorIOS ButtonPress

2 个答案: