重定向到屏幕时，componentDidMount无法正常工作 [英] componentDidMount is not working when redirect to a screen

问题描述

我要通过componentDidMount列出屏幕A中的一组文件(图像)，从该屏幕AI中可以看到另一个屏幕B链接，在这里我可以看到文件的详细视图，并且可以选择删除文档.

I am having componentDidMount to list set of files(images) in a screen A, from this screen A I am having another screen B link where I can see detailed view of a file and there I have an option to delete a document.

使用

  <TouchableOpacity style={Styles.HomeButton} onPress={ () => this.props.navigation.navigate('Gallery')}>
     <Text style={Styles.HomeButtonText}>View Photos</Text>
  </TouchableOpacity>

componentDidMount工作正常，但是当我在取消链接回调中删除文件(我正在使用react-native-fs)时，我像这样调用导航

componentDidMount working fine, But when I delete a file (i am using react-native-fs) on unlink callback I am calling the navigation like

this.props.navigation.navigate('Gallery');

可以很好地重定向到屏幕A，但是componentDidMount无法正常工作，这意味着我仍然可以在列表中看到该已删除文件. 即屏幕A没有刷新，是否有可能的解决方法?

Which is working fine redirecting to Screen A, but componentDidMount is not working which means I can still see that deleted file in the list. i.e Screen A is not refreshing, is there any possible solution?

推荐答案

在react-navigation中，如果您导航到其他屏幕，则不会卸载该组件，除非您在堆栈导航中重置了堆栈.因此，当您返回上一个屏幕时，由于已经安装了该屏幕，因此componentDidMount将不会触发.

In react-navigation, the component will not unmount if you navigate to other screens unless you reset the stack in stack navigation. So when you come back to the previous screen, as it is already mounted, componentDidMount will not trigger.

您可以绑定反应导航事件侦听器，以在返回屏幕时触发一些代码.

You can bind a react navigation event listener to trigger some piece of code when you get back to the screen.

this.focusListner = this.props.navigation.addListener("didFocus",() => {
  // Update your data
});

在卸载组件时，请不要忘记删除事件侦听器.

Don't forget to remove event listeners while you unmount the component.

componentWillUnmount() {
    // remove event listener
    this.focusListner.remove();
}

这篇关于重定向到屏幕时，componentDidMount无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！