Native Base多次调用Toast组件出现位置偏移错位问题

环境信息 #

"expo": "~44.0.0",
"expo-location": "~14.0.1",
"expo-permissions": "~13.1.0",
"native-base": "^3.3.11",
"react-native": "0.64.3",
"react-native-maps": "0.29.4"

问题详情 #

开发过程中出现Toast组件位置错位异常：应用运行期间多次调用Toast时，首次弹出位置正常，从第二次调用开始，Toast会显示在上一次Toast设定位置的下方，每次调用都会重复累加偏移。

• 第1次调用效果
  
• 第2次调用效果
  
• 第3次调用效果
  
  通过React Native Debugger排查确认，Toast消失后仍有组件实例残留在屏幕渲染层中，未被正常卸载。

问题根因 #

该问题是NativeBase 3.3.x版本Toast组件的已知缺陷：Toast触发时会在应用根渲染节点动态插入占位容器，Toast关闭逻辑仅隐藏容器内的提示内容，未卸载占位容器节点。后续新触发Toast计算垂直偏移时，会将所有历史残留占位容器的高度累计入偏移值，最终导致位置逐次下移，和调试时观察到的节点残留现象完全吻合。

修复方案 #

按优先级从高到低可选择以下方案：

• 版本升级修复：将native-base升级至3.4.0及以上版本，官方已在该版本合入Toast节点卸载逻辑的修复代码，升级后原有Toast调用代码无需修改即可正常运行。升级执行命令：

# npm 安装
npm install native-base@^3.4.0
# yarn 安装
yarn add native-base@^3.4.0

• 现有版本兼容修复：若暂时无法升级依赖版本，可在每次调用Toast.show前手动执行Toast.closeAll()方法，清空所有历史残留的Toast实例，避免偏移累计。调用示例：

// 弹出新Toast前先清空所有残留实例
Toast.closeAll()
Toast.show({
  title: '操作提示',
  placement: 'bottom',
  duration: 2000
})

• 硬编码偏移兜底：直接给Toast配置固定的top/bottom偏移值，跳过组件默认的自动位置计算逻辑，该方案适配不同屏幕尺寸的成本较高，仅作为极端场景下的临时方案，不推荐长期使用。

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