React Navigation使用createMaterialTopTabNavigator报FragmentManager事务错误

• 该报错本质是Android原生层的Fragment事务冲突，createMaterialTopTabNavigator 默认基于ViewPager实现，和createNativeStackNavigator搭配使用时，两者会同时触发FragmentManager的事务操作，进而抛出「已经在执行事务」的异常。而BottomTabNavigator不需要依赖ViewPager实现，因此相同逻辑不会触发冲突。
• 另一个常见触发原因是React Navigation相关依赖版本不兼容，尤其是@react-navigation/material-top-tabs和@react-navigation/native-stack的主版本不一致。

方案1：替换原生栈为JS实现栈（最快生效） #

把原生实现的createNativeStackNavigator替换为JS实现的createStackNavigator，即可规避原生层的事务冲突，修改代码如下：

// 替换引入声明
// import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()
// 其余代码保持原有逻辑不变

方案2：关闭TopTab懒加载 #

如果必须使用原生栈，可以在TopTab配置中关闭懒加载，避免页面切换时同时触发栈和Tab的事务操作：

<TopTab.Navigator lazy={false}>
  <TopTab.Screen name='Home' component={HomeStack} />
  <TopTab.Screen name='About' component={About} />
</TopTab.Navigator>

方案3：统一导航依赖版本 #

确保所有React Navigation相关依赖的主版本一致，比如统一升级到6.x版本：
执行命令更新依赖：

npm install @react-navigation/native@^6.x @react-navigation/material-top-tabs@^6.x @react-navigation/native-stack@^6.x

更新后清理构建缓存重新编译即可。

方案4：替换ViewPager实现 #

6.x以上版本的@react-navigation/material-top-tabs支持替换Pager实现，使用react-native-pager-view替代默认的ViewPager也能解决冲突：
首先安装依赖：

npm install react-native-pager-view

修改TopTab配置：

import PagerView from 'react-native-pager-view'

<TopTab.Navigator pager={props => <PagerView {...props} />}>
  {/* 原有Screen配置保持不变 */}
</TopTab.Navigator>

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