Как обновить опоры начального маршрута в компоненте NavigatoriOS?

Question

Этот вопрос касается стратегий передачи объектов данных вокруг нескольких компонентов.

На скриншоте ниже, у меня есть NavigatorIOS с начальным маршрутом в ListComponent. Его в Боковое меню, которое отображает компонент Фильтры. В настоящее время открыто Боковое меню и Фильтры видны.

Моя цель состоит в том, что когда пользователь изменяет вещи в Фильтры, я хочу, чтобы обновить ListComponent.

Я мог бы использовать объект singleton для хранения фильтров, но мне все же нужно найти способ сообщить ListComponent, что они изменились.

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

решаемые

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

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

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

Answer 1

Маршрут имеет passProps вариант, который принимает объект реквизита, так что, как вы проходите реквизита в компонент в навигаторе. Вы могли бы изменить свое состояние MainTab в onFilterChange и передать это через passProps. В качестве альтернативы вы можете посмотреть метод replace на навигаторе.

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

Answer 2

Использование OP, joshua-lieberman, такой же ответ.

Он работал для меня с помощью Navigator

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

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

Я использую его в 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}); 
    } 
}