Javascript 在组件上操纵NavigatorIOS路由

我正在尝试用React Native构建一个非常简单的Todo应用程序。它由两个视图组成：一个包含任务列表，一个包含输入字段（用于添加新字段）。导航由

NavigatorIOS

及其上的按钮（如果使用UIKit，则为

UIBarButtonItem

）保证

在列表视图中，导航器上有一个Add right按钮，带有文本字段的视图上有一个back按钮，左侧有一个Done按钮，右侧有一个Done按钮。单击“完成”时，应添加一个新任务，其内容为文本字段

问题是，按钮及其操作是在创建

NavigatorIOS

组件时定义的，我找不到将另一个组件中定义的方法附加为按钮操作的方法

例如，下面是我的

NavigatorIOS

class TodoList extends Component {

    render() {
        return (
            <NavigatorIOS
                ref="nav"
                style={styles.navbar}
                initialRoute={{
                    component: ItemList,
                    title: 'Todo list',
                    rightButtonTitle: 'Add',
                    onRightButtonPress: () => {
                        this.refs.nav.push({
                            title: 'Add a new task',
                            component: AddTodo,
                            rightButtonTitle: 'Done',
                            onRightButtonPress: () => {
                                console.log('done !');
                            }
                        });
                    }
                }}
            />
        );
    }
}

很明显，这个API需要改进。我们正在中继中积极地使用路由API，并希望反应路由器，但我们希望NavigatorIOS能够独立使用。也许我们应该在navigator对象中添加一个事件发射器，以便子组件可以订阅各种navigator活动：

this.addListenerOn(this.props.navigator.events, 'rightButtonPress', this._handleRightBtnPress);

---

A.在初始组件中

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

B.在推送组件中
替换右键按钮按下按钮组件中的func。

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

---

我遇到了完全相同的架构问题，并通过扩展NavigationBar解决了这个问题，这样我就可以在子组件中定义操作。我还调查了利用事件的可能性，例如家长正在发出菜单单击事件，孩子可以监听事件并采取行动，但不确定这是正确的方法，有兴趣看到其他人说什么。@AaronSaunders Hi感谢您的评论！您是否扩展了

NavigatorIOS

，或者

NavigationBar

是

NavigatorIOS

的内部组件？我试图扩展导航器，但由于回调是在

initialRoute

prop（以及更深层）上，我不知道如何公开它们。

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