使用StackNavigator导航到另一页面时销毁当前页面，并停止上一页的所有正在运行的进程

Question

I'm using react-native, when I try to navigate to another page using StackNavigator the previous page is running on the background

This is App.js

import Login from './app/component/Login';
import Menu from './app/component/Menu';
import Guide from './app/component/additions/Guide';
import { StackNavigator } from 'react-navigation';

const Navigator = StackNavigator({
  login: {screen: Login},
  main: {screen: Menu},
  guide: {screen: Guide},
},{ headerMode: 'none' });

And I have a Guid.js like this

componentDidMount() {
  setInterval(() => {
    console.log('I do not leak');
  }, 1000);
}

render() {
  const {navigate} = this.props.navigation;
  return(
    <TouchableOpacity onPress={() => navigate('main')}>
      <Text> navigate to main </Text>
    </TouchableOpacity>
  )
}

The problem is, even I navigate to the main page, I still getting the interval that I log inside the componentDidMount of my Guide.js, and even going back on that page, it runs the componentDidMount and run again my log, that means the interval is running again, what I want to do is after or while navigating to another page, I want to destroy the Guide.js, the page where I came from, and I have a page where I run WebView I wan't to do the same thing for that page, how can I do that?

Answer 1

Once timers are set, they runs asynchronously, you have to remove the timer if it's no longer needed when you leave the screen, like so:

constructor(props) {
    this.timerID = null;
}

componentDidMount() {
    this.timerID = setInterval(() => {
        console.log('I do not leak');
    }, 1000);
}

/**
 * Frees up timer if it is set.
 */
componentWillUnmount() {
    if (this.timerID != null) {
        clearInterval(this.timerID);
    }
}

Answer 2

您可以使用新的React-native Lazy API仅在需要时加载组件，以下是有关使用方法的一些文档： https : //reactjs.org/docs/code-splitting.html