Manipule la ruta NavigatorIOS en un componente

Estoy intentando build una aplicación Todo muy simple en React Native. Está compuesto por dos vistas: una con una list de tareas, una con un campo de input (para agregar una nueva). La navigation está asegurada por un NavigatorIOS y botones en él (que habría sido UIBarButtonItem con UIKit).

En la vista de list, hay un button Agregar derecho en el Navegador, en la vista con el campo de text, allí está el button Atrás a la izquierda y un Listo a la derecha. Al hacer clic en Hecho, debe agregar una tarea nueva con el contenido del campo de text.

El problema es que los botones y sus acciones se definen al crear el componente NavigatorIOS , y no encuentro la forma de adjuntar un método definido en otro componente como una acción de button.

A modo de ejemplo, aquí está mi 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 !'); } }); } }} /> ); } } 

No coloco aquí mis otros dos elementos, AddTodo y AddTodo ya que no hay nada interesante en él.

Lo que necesito es una forma de hacer que los componentes se comuniquen (como en el patrón de delegación) con el componente de navigation.

Tal vez no sea posible, o estoy totalmente equivocado en el paradigma utilizado con React Native, así que siéntete libre de comentar si algo no está claro en mi pregunta.

Edición 05/26

En realidad, el equipo de Facebook sabe que falta algo para manejar ese caso de uso con el componente NavigatorIOS .

De Eric Vicenti (publicado el 3 de febrero de 2015) sobre un problema en GitHub que cubre exactamente mi pregunta.

Actualmente, la mejor manera de hacerlo es crear un EventEmitter en el propietario de NavigatorIOS , luego puede pasarlo a los niños usando route.passProps . El niño puede mezclar Subscribable.Mixin y luego en componentDidMount , puede

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

Está claro que esta API necesita mejoras. Estamos trabajando activamente en la API de routing en Retransmisión, y esperamos que reaccione-enrutador, pero queremos que NavigatorIOS sea utilizable de forma independiente. Tal vez deberíamos agregar un emisor de events dentro del object de browser, de modo que los componentes secundarios pueden suscribirse a la actividad de varios browseres:

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

A. En el componente inicial

 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. En el componente empujado
reemplace onRightButtonPress func en el componente insertado.

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