Как обновить компонент, когда навигатор возвращается к нему?

Question

Мое приложение использует Navigator для маршрутизации и переходов на экран.

Первый экран имеет список предметов. Когда пользователь удаляет элемент, он открывает подробный экран, на котором пользователь может его редактировать.

Когда пользователь закончил редактирование и вернулся (функция popigator's pop()), список не отражает изменения, сделанные пользователем. Экран нужно снова загрузить, чтобы отобразить обновленный список.

Есть ли способ заставитьОбновить компонент в стеке Навигатора?

Я пробовал использовать «Навигатор onWillFocus» Navigator, я могу console.log маршрут, но не знаю, как получить ссылку на экран, который представлен маршрутом, и заставить его обновить ,

Это правильно регистрирует маршрут мы собираемся перейти к:

_onWillFocus(route) { 
     console.log('will transition to ' + route.name) 
}, 

...

<Navigator 
      ref={(ref) => this._navigator = ref} 
      style={{flex:1}} 
      configureScene={() => Navigator.SceneConfigs.FadeAndroid} 
      renderScene={this.renderScene} 
      onWillFocus={this._onWillFocus} 
/> 

Answer 1

Предполагая, что вы действительно хотите использовать onWillFocus событие, потому что имеет наибольший смысл в вашем case, вот один из способов сделать это:

Измените свой метод renderScene, так что ссылка на предоставленный компонент сцены сохраняется (в то время как com Понент установлен):

renderScene(route, nav) { 
    var Component = route.component; 

    return (
    <Component 
     ref={component => { route.scene = component; }} 
     navigator={nav} 
     {...route.passProps} 
    /> 
); 
} 

Затем в onWillFocus обработчике вы можете направить событие компонента:

_onWillFocus(event) { 
    const { data: { route } } = event; 

    if (route.scene && route.scene.componentWillFocus) { 
    route.scene.componentWillFocus(event); 
    } 
} 

Наконец, в обработчике компонент componentWillFocus вы можете делать все, что вам необходимо обновить состояние и вызвать новый рендер.

Для других случаев применения, пожалуйста, посмотрите на https://facebook.github.io/react/tips/communicate-between-components.html

Для связи между двумя компонентами, которые не имеют отношения родитель-ребенок, вы можете создать свою собственную глобальную систему событий. Подпишитесь на события в componentDidMount(), отмените подписку в компонентеWillUnmount() и вызовите setState(), когда вы получаете событие. Паттерн потока является одним из возможных способов его организации.