Come aggiornare gli oggetti di scena del percorso iniziale in un componente NavigatoriOS?

Question

Questa domanda riguarda le strategie per il passaggio degli oggetti dati attorno a diversi componenti.

Nello screenshot qui sotto, ho un NavigatorIOS con un percorso iniziale di un ListComponent. Si trova in un menu laterale che visualizza un componente Filtri. Attualmente, il menu laterale è aperto e I filtri sono visibili.

Il mio obiettivo è che quando l'utente cambia le cose in Filtri, voglio aggiornare il ListComponent.

Potrei usare un oggetto singleton per memorizzare i filtri, ma ho ancora bisogno di trovare un modo per dire al ListComponent che hanno cambiato.

var defaultFilters = { 
invited: true, 
joined: false, 
public: true, 
private: false, 
} 

class MainTab extends Component { 

constructor(props){ 
    super(props); 

    this.props.filters = defaultFilters; 
} 

render() { 

    var onFilterChange = function (filters) { 
     console.log("filters changed"); 
    }; 

    var filtersComponent = (<Filters filters={this.props.filters} onFilterChange={onFilterChange.bind(this)} />); 

    return (
     <SideMenu menu = { filtersComponent } touchToClose={true} openMenuOffset={300} animation='spring'> 
      <NavigatorIOS 
       style={styles.container} 
       initialRoute={{ 
        title: 'List', 
        component: ListComponent 
       }} 

       /> 
     </SideMenu> 
    ); 
} 
} 

Risolto

var onFilterChange = function (filters) { 
     console.log("filters changed"); 

     this.refs.navigator.replace({ 
      title: 'List', 
      component: ListComponent, 
      passProps: { 
       filters: filters 
      } 
      }); 
    }; 

    <NavigatorIOS 
      ref='navigator' 
      ... 
      /> 

Answer 1

Il percorso ha un'opzione passProps che accetta un oggetto di oggetti di scena, in modo che è così che si passa puntelli nel componente nel navigatore. Potresti potenzialmente modificare lo stato MainTab in onFilterChange e inviarlo tramite passProps. In alternativa si consiglia di guardare il metodo replace sul navigatore.

https://facebook.github.io/react-native/docs/navigatorios.html

Answer 2

Uso del PO, joshua-lieberman, stessa risposta.

ha funzionato per me usando Navigator

var onFilterChange = function (filters) { 
    console.log("filters changed"); 

    this.refs.navigator.replace({ 
     title: 'List', 
     component: ListComponent, 
     passProps: { 
      filters: filters 
     } 
     }); 
}; 
... 
     <Navigator 
     ref='navigator' 
     ... 
     /> 

lo uso in componentDidMount

componentDidMount() { 
    this.changeInitialRoute(this.refs.navigator); 
} 

changeInitialRoute(navigator) { 
    const valet = this.props.valet; 
    if (valet && valet.user_id && valet.token) { 
     console.log('valet ready', this.props); 
     navigator.resetTo({title: 'Home', index: 0}); 
    } else { 
     navigator.resetTo({title: 'Login', index: 0}); 
    } 
}