使用StackNavigator導航到另一頁面時銷毀當前頁面，並停止上一頁的所有正在運行的進程

Question

我正在使用react-native，當我嘗試使用StackNavigator導航到另一個頁面時，上一個頁面在后台運行

這是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' });

我有一個像這樣的Guid.js

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>
  )
}

問題是，即使我瀏覽到main網頁，我仍然得到我的日志里面的間隔componentDidMount我Guide.js，甚至在該網頁上回去，它運行componentDidMount並再次運行我的日志，這意味着interval再次運行，我想要做的是在導航至另一個頁面之后或同時，我想破壞Guide.js，即我來自的頁面，而我有一個頁面在其中我不想執行的WebView該頁面的相同內容，我該怎么做？

Answer 1

設置好計時器后，它們將異步運行，如果您離開屏幕時不再需要該計時器，則必須刪除它，如下所示：

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