react-native - 等待反应导航过渡完成

Question

我正在寻找一种在 react-navigation 中调度导航操作的方法，并在触发下一步之前等待它完全完成。

就像是：

await dispatch({
  type: 'Navigation/goBackTo',
  routeName: 'Main',
})
dispatch(anotherAction())

目前我正在使用 setTimeout 解决方法。

标签： react-nativereact-navigation

Answer 1

与 react-navigation 无关，但仍然有用：来自 react-native 的InteractionManager API。

有一个方法runAfterInteractions()将在所有动画完成后调用，所以在导航的情况下，我发现它是一个方便的工具。例如，您可以执行以下操作：

class Main extends Component {

    componentDidMount() {
        // 1: Component has been mounted off-screen
        InteractionManager.runAfterInteractions(() => {
            // 2: Component is done animating
            // 3: Do your anotherAction dispatch() here
        }); 
    }
}