javascript - 在组件上操作 NavigatorIOS 路由

Question

我正在尝试在 React Native 中构建一个非常简单的 Todo 应用程序。它由两个 View 组成:一个带有任务列表，一个带有输入字段(用于添加新的)。导航由 NavigatorIOS 和其上的按钮(本来是带有 UIKit 的 UIBarButtonItem)保证。

在 ListView 中，导航器上有一个添加右键，在带有文本字段的 View 中，左侧有后退按钮和一个完成在右侧。当点击完成时，它应该添加一个带有文本字段内容的新任务。

问题是，按钮及其操作是在创建 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 !');
                            }
                        });
                    }
                }}
            />
        );
    }
}

我没有把我的另外两个组件 ItemList 和 AddTodo 放在这里，因为上面没有什么有趣的东西。

我需要的是一种使组件与导航组件通信(如委托(delegate)模式)的方法。

也许这是不可能的，或者我对 React Native 使用的范式完全错误，所以如果我的问题有什么不清楚的地方，请随时发表评论。

编辑 05/26

实际上，Facebook 团队意识到在使用 NavigatorIOS 组件处理该用例时缺少一些东西。

来自 Eric Vicenti (发布于 2015 年 2 月 3 日)an issue on GitHub这正好涵盖了我的问题。

Currently the best way to do that is to create an EventEmitter in the owner of the NavigatorIOS, then you can pass it down to children using route.passProps. The child can mix in Subscribable.Mixin and then in componentDidMount, you can

this.addListenerOn(this.props.events, 'myRightBtnEvent', this._handleRightBtnPress);

It is clear that this API needs improvement. We are actively working the routing API in Relay, and hopefully react-router, but we want NavigatorIOS to be usable independently. Maybe we should add an event emitter inside the navigator object, so child components can subscribe to various navigator activity:

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

Answer 1

一个。在初始组件中

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.在推送组件
替换推送组件中的 onRightButtonPress 函数。

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