Manipolare la rotta NavigatorIOS su un componente

Question

Sto provando a creare un'applicazione Todo molto semplice in React Native. È composto da due viste: una con un elenco di attività, una con un campo di input (per aggiungerne una nuova). La navigazione è assicurata da un NavigatorIOS e pulsanti su di esso (che sarebbe stato UIBarButtonItem con UIKit).

Sulla visualizzazione elenco, c'è un Aggiungi tasto destro su Navigator, sulla vista con il campo di testo, c'è il pulsante indietro sulla sinistra e un Fatto uno a destra. Facendo clic su fatto, dovrebbe aggiungere una nuova attività con il contenuto del campo di testo.

Il problema è che, pulsanti e le loro azioni sono definite durante la creazione del NavigatorIOS componente, e io non trovano un modo per fissare un metodo definito in un altro componente come azione pulsante.

A titolo di esempio, ecco la mia 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 !'); 
          } 
         }); 
        } 
       }} 
      /> 
     ); 
    } 
} 

non metto qui le mie altre due componenti ItemList e AddTodo come non c'è nulla di interessante su di esso.

Quello che mi serve è un modo per far comunicare i componenti (come nel modello di delega) con il componente di navigazione.

Forse non è possibile, o sono totalmente in errore sul paradigma utilizzato con React Native, quindi sentitevi liberi di commentare se qualcosa non è chiaro sulla mia domanda.

Modifica 05/26

In realtà, Facebook squadra è consapevole che manca qualcosa per gestire questo caso l'utilizzo con NavigatorIOS componente.

Da Eric Vicenti (pubblicato il 3 febbraio 2015) su an issue on GitHub che copre esattamente la mia domanda.

Attualmente il modo migliore per farlo è quello di creare un EventEmitter nel proprietario del NavigatorIOS, allora si può passare verso il basso per i bambini utilizzando route.passProps. Il bambino può mescolare in Subscribable.Mixin e poi in componentDidMount, è possibile

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

E 'chiaro che questa API ha bisogno di miglioramento. Stiamo lavorando attivamente all'API di routing in Relay e speriamo che il router reagisca, ma vogliamo che NavigatorIOS sia utilizzabile indipendentemente. Forse dovremmo aggiungere un emettitore evento all'interno dell'oggetto navigatore, in modo da componenti bambino può iscriversi a varie attività di navigatore:

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

Answer 1

A. In componente iniziale

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. In spinto componente
sostituire onRightButtonPress func nel componente spinto.

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