react-navigation/native Android端goBack后页面无法点击、尺寸异常求助

问题根因 #

你使用的TransitionPresets.ModalPresentationIOS是React Navigation为iOS平台专属设计的模态过渡预设，内置了iOS端特有的视图缩放、层级管理逻辑，没有做安卓平台的兼容适配。安卓端调用goBack返回时，该预设的动画结束逻辑不会正确重置前序页面（也就是你的底部标签页）的缩放状态、触摸区域层级，最终导致返回后页面尺寸异常、触摸事件被拦截无法交互，嵌套路由的场景下这个兼容问题会被放大。

可落地的解决方案 #

方案1：区分平台配置过渡效果（最推荐） #

针对不同平台使用对应的过渡预设，安卓端不要直接使用iOS专属的模态预设，修改你的cardOptions配置即可：

import { Platform } from 'react-native'
import { TransitionPresets } from '@react-navigation/stack'

const cardOptions = {
  cardOverlayEnabled: true,
  // 侧滑返回手势仅iOS启用，安卓可根据需求自行开启
  gestureEnabled: Platform.OS === 'ios',
  // 平台区分过渡预设
  ...(Platform.OS === 'ios' 
    ? TransitionPresets.ModalPresentationIOS 
    : TransitionPresets.DefaultTransition
  ),
}

方案2：手动指定返回路由避免栈状态异常 #

如果修改过渡预设不符合你的交互需求，可以替换goBack为指定路由跳转的写法，强制回到底部标签页根路径，清除路由栈异常状态：

// 原goBack()替换为以下写法
navigation.navigate('BottomTabs')
// 也可以用popToTop清空当前栈的子页面，回到Stack的初始路由
// navigation.popToTop()

方案3：强制修复前序页面样式 #

如果需要保留安卓端类iOS模态效果，可以给底部标签页的根容器添加强制样式，覆盖过渡预设遗留的异常样式：

// BottomTabs页面根组件样式
const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    flex: 1,
    // 强制清除可能残留的触摸拦截
    pointerEvents: 'auto',
  }
})

内容的提问来源于stack exchange，提问作者Antoni