在打开的组件中处理 NavigatorIOS ButtonPress

Posted 2023-03-15

【中文标题】在打开的组件中处理 NavigatorIOS ButtonPress

【英文标题】：Handle NavigatorIOS ButtonPress in the opened component

【发布时间】：2015-06-27 11:58:01

【问题描述】：

我的应用中有 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() 而已。

【问题讨论】：

通过 prop 将处理程序向下传递给子组件

你能举个例子吗？因为如果我通过 props 传递一个函数，该函数将是对上一页函数的引用。

【参考方案1】：

A.在初始组件中

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

B.在推送的组件中 替换推送组件中的 onRightButtonPress 函数。

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);
,

【参考方案2】：

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

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

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