У меня недавно была похожая проблема. В моем случае, я думаю, что проблема в основном сводилась к монтажу компонентов с помощью стековой навигации React Native. componentDidMount будет вызываться только один раз, пока вы находитесь в стеке, и не будет перерисовываться, пока вы не покинете стек и не вернетесь к нему. Я изложил способ решения проблемы ниже:
/**
* @issue page does not refresh if its already been mounted on the navigation stack
* @todo listen to navigation events, and trigger refresh
* @todo get rid of componentDidMount, and instead
* have the navigation event handler trigger the refresh
Таким образом, вместо использования componenDidMount()
, при переходе на указанную страницу, передайте некоторый тип параметра навигации, который позволяет странице знать, что она нуждается в обновлении.
navigate('ExamplePage', { example: '<new Example>' })}
и ExamplePage
componentWillReceiveProps(nextProps) {
if (nextProps.navigation.state.params.example) {
this.props.retrieveData(this.props.example);
}
}
EDIT / UPDATE
В качестве другого варианта и, на мой взгляд, гораздо лучшего решения, вы можете прослушать NavigationEvents. Вот документация, хотя это не очень подробно
https://reactnavigation.org/docs/en/navigation-events.html
Так что в моем случае я все равно слушал бы параметры навигации, переданные с navigate
на предыдущем экране. Затем, добавив этот код ниже, я добавляю свою функцию обновления в onDidFocus
, которая будет запускаться каждый раз, когда страница появляется на экране.
import {NavigationEvents} from 'react-navigation';
render() {
return (
...
<NavigationEvents onDidFocus={() => this._refresh()} />
...
)
}
С этим решением вы также можете первоначально позвонить componentDidMount()
. И вам не нужно использовать componentWillReceiveProps
, поскольку это плохая практика