在组件上操作 NavigatorIOS 路由答案

【问题标题】：Manipulate NavigatorIOS route on a component在组件上操作 NavigatorIOS 路由
【发布时间】：2015-07-08 17:25:04
【问题描述】：

我正在尝试在 React Native 中构建一个非常简单的 Todo 应用程序。它由两个视图组成：一个带有任务列表，一个带有输入字段（添加一个新字段）。导航由 NavigatorIOS 和上面的按钮确保（在 UIKit 中应该是 UIBarButtonItem）。

在列表视图上，导航器上有一个添加右键，在带有文本字段的视图上，左侧有后退按钮和一个完成在右边。单击完成时，它应该添加一个包含文本字段内容的新任务。

问题是，按钮及其操作是在创建NavigatorIOS 组件时定义的，我没有找到将另一个组件中定义的方法附加为按钮操作的方法。 p>

例如，这是我的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 放在这里，因为它没有什么有趣的。

我需要一种使组件与导航组件通信（如委托模式）的方法。

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

编辑 05/26

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

来自an issue on GitHub 上的Eric Vicenti（2015 年 2 月 3 日发布），这完全涵盖了我的问题。

目前最好的方法是在NavigatorIOS 的所有者中创建一个EventEmitter，然后您可以使用route.passProps 将其传递给孩子。孩子可以混入Subscribable.Mixin再混入componentDidMount，就可以了
this.addListenerOn(this.props.events, 'myRightBtnEvent', this._handleRightBtnPress);
很明显，这个 API 需要改进。我们正在积极使用 Relay 中的路由 API，并希望使用 react-router，但我们希望 NavigatorIOS 能够独立使用。也许我们应该在 navigator 对象中添加一个事件发射器，以便子组件可以订阅各种 navigator 活动：
this.addListenerOn(this.props.navigator.events, 'rightButtonPress', this._handleRightBtnPress);

【问题讨论】：

我遇到了同样的架构问题，并通过扩展 NavigationBar 来解决它，以便我可以在子组件中定义操作。我还研究了利用事件的可能性，例如父母发出菜单点击事件，孩子可以监听事件并采取行动，不确定这是正确的方法，有兴趣看看其他人怎么说。
@AaronSaunders 您好，感谢您的评论！您是否扩展了NavigatorIOS，或者NavigationBar 是NavigatorIOS 的内部组件？我试图扩展导航器，但由于回调在 initialRoute 道具上（更深），我不知道如何公开它们。

标签： javascript ios react-native

【解决方案1】：

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.在推送的组件中
替换推送组件中的 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);
},

【讨论】：