React 导航：FragmentManager 已经在执行事务

Question

我正在使用 BottomTabNavigation to create tabs navigation in react native with nested Stack navigation, but when I want to implement the same logic with createMaterialTopTabNavigator，我得到了这个错误。这是代码：

    const Stack = createNativeStackNavigator()
    const TopTab = createMaterialTopTabNavigator()

    
    const HomeStack = () => {
        return <Stack.Navigator>
                   <Stack.Screen name="Home" component={Home} options={options} />
                   <Stack.Screen name="TodoDetail" component={TodoDetail} />
        </Stack.Navigator>
    }
    
    export default function App() {
        return (
           <NavigationContainer>
              <TopTab.Navigator>
                 <TopTab.Screen name='Home' component={HomeStack} />
                 <TopTab.Screen name='About' component={About} />
              </TopTab.Navigator>
           </NavigationContainer>
        )
    }

这是设备中的错误：

Answer 1

问题不在于 TopTab 的定义，而是当前的实施导致了问题。

TopTab 导航必须在 Stack.Screen 中。忘记 BottomTabNavigation，它使用不同的方法来显示屏幕。

所以你必须在 screen

中使用 TopTabNavigation

仅举当前实施的示例：

const Stack = createNativeStackNavigator()
const TopTab = createMaterialTopTabNavigator()

const topBarStack = () => {
  return (
    <TopTab.Navigator>
      <TopTab.Screen name='first-tab' component={firstTab} />
      <TopTab.Screen name='second-tab' component={secondTab} />
    </TopTab.Navigator>
  )
}
    
export default function App() {
  return (     
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={topBarStack} options={options} />
        <Stack.Screen name="TodoDetail" component={TodoDetail} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

React 导航：FragmentManager 已经在执行事务

React navigation : FragmentManager is already executing transanctions

react-native

react-navigation