Обновить данные при переходе назад React Native
Как мне обновить свои данные при возвращении? Например, если я хочу что-то отредактировать, а затем нажимаю «стрелку назад», я хочу сразу увидеть изменения.
componentWillMount() {
getData("data", (res) => {
this.setState({ name: res.name, date: res.date});
var date = new moment(this.state.date);
var currentDate = new moment();
var duration = moment.duration(date.diff(currentDate)).as("days");
duration = Math.round(duration + 1).toString();
var daysLeftPercent = Math.round([duration / 340] * 100);
this.setState({ daysLeft: duration, daysLeftPercent: daysLeftPercent});
});
}
Вроде этого, но я также хочу запускать его при нажатии «стрелки назад» на другой странице, которая ведет к этому.
Прочтите документ: reactjs.org/docs/react-component.html. Вы можете использовать shouldComponentUpdate(nextProps, nextState) или static getDerivedStateFromProps(props, state)
Ответы 3
Если вы хотите получить доступ к методу компонента из другого компонента, вы должны привязать его (может быть в пределах props или параметров навигации). И для доступа к «стрелке назад» (я думаю, вы имеете в виду кнопку «Назад» на устройстве, иначе все зависит от вас), вы можете использовать BackHandler из react native.
BackHandler.addEventListener(
"hardwareBackPress",
this.props.onPressBackButton
);
...
onPressBackButton = () => {
//do something
}
Если вы хотите вернуться к предыдущему компоненту и передать данные предыдущему компоненту, вы можете использовать () => this.props.navigation.goBack ()
Например, если вы хотите нажать кнопку, чтобы вернуться:
<TouchableHighlight onPress = {() => this.props.navigation.goBack(
//do something here
)}>
<Text> Go Back to previous component </Text>
</TouchableHighlight>
Могу ли я добавить это к кнопке в верхнем левом углу (в заголовке) вместо того, чтобы создавать новую?
Если вы используете navigationOptions для перехода между компонентами, по умолчанию в левой части заголовка компонента будет кнопка «Назад».
@perry Итак, как установить обратный вызов goBack для кнопки «Назад» по умолчанию (если мы не используем настраиваемый левый заголовок)?
Как обновить экран при переходе обратно в React Native ----
React.useEffect (() => {const unsubscribe = navigation.addListener ('focus', () => {Alert.alert ('Refreshed');}); return unsubscribe;}, [навигация]);
используйте это в useefect и перед рендерингом / возвратом
Я думаю, они просят обновить данные, а не обновлять всю страницу.
вот как вы можете получить доступ к функции экрана A при переходе назад с экрана B stackoverflow.com/a/52732960/7462666 вы можете просто вызвать обновление при переходе назад