React Navigation栈页面回退时，消失动画期间无法交互前一页面的问题求助

各位开发者大佬好，我碰到一个React Navigation的交互问题，想请教下有没有可行的解决方案：

当调用navigation.goBack()触发页面回退时，上层页面（比如示例里的Upper页面）在执行消失动画的过程中，下方的Home页面完全没法接收用户交互——必须等动画结束、Upper页面彻底卸载后，才能点击Home页面的按钮，这给用户的感觉就是交互有明显延迟。我想实现的效果是：在上层页面开始播放消失动画的同时，就能直接操作下层页面的元素。

另外还有个奇怪的点：这个问题只在iOS上出现，公司项目的安卓端是正常工作的，完全没有这个交互延迟的问题。

下面是我简化后的示例代码：

Navigator 代码 #

function MyStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
      }}>
      <Stack.Screen name="home" component={Home} />
      <Stack.Screen name="upper" component={Upper} />
    </Stack.Navigator>
  );
}

Upper 页面组件 #

const Upper = () => {
  const navigation = useNavigation();

  const goBack = () => {
    console.log('back click');
    navigation.goBack();
  };

  useEffect(() => {
    console.log('upper render');
    return () => console.log('upper unmount');
  }, []);

  return (
    <View style={styles.container}>
      <Text>Upper</Text>
      <Button onPress={goBack} title="goBack" />
    </View>
  );
};

export default Upper;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Home 页面组件 #

const Home = () => {
  const navigation = useNavigation();

  const goUpper = () => {
    console.log('goupper click');
    navigation.navigate('upper');
  };

  useEffect(() => {
    console.log('home render');
    return () => console.log('home unmount');
  }, []);

  return (
    <View style={styles.container}>
      <Text>Home</Text>
      <Button title="goUpper" onPress={goUpper} />
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

有没有大佬知道怎么解决这个问题？麻烦指点下，谢谢！

备注：内容来源于stack exchange，提问作者user20821745