Question

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

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

问题是，按钮及其操作是在创建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放在这里，因为它没有什么有趣的。

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

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

编辑05/26

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

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

目前最好的方法是在EventEmitter的所有者中创建NavigatorIOS，然后您可以使用route.passProps将其传递给孩子。孩子可以在Subscribable.Mixin中混合，然后在componentDidMount中，你可以
this.addListenerOn(this.props.events, 'myRightBtnEvent', this._handleRightBtnPress);
很明显，这个API需要改进。我们正在积极地在Relay中使用路由API，并希望反应路由器，但我们希望NavigatorIOS可以独立使用。也许我们应该在导航器对象中添加一个事件发射器，因此子组件可以订阅各种导航器活动：
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 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);
},

在组件上处理NavigatorIOS路由

1 个答案: