等待反应导航过渡完成

Question

我正在寻找一种反应导航的方式来调度导航动作，并等待其完全完成后再触发下一步。

就像是：

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

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

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

Answer 2

如果您正在使用a，StackNavigator则可以使用transitionEnd事件

React.useEffect(() => {
  const unsubscribe = navigation.addListener('transitionEnd', (e) => {
    // Do something
  });

  return unsubscribe;
}, [navigation]);