为什么后退按钮不能导航回主屏幕？

Question

我添加了主页堆栈和接收堆栈文件，但现在当从主屏幕导航以查看单个食谱时，后退按钮不再起作用并且无法导航回主屏幕。我有点迷茫为什么后退导航停止工作

这是我的导航文件。

// Stack
import HomeStack from './stacks/HomeStack'
import AuthStack from './stacks/AuthStack'
// Components
import Loading from '../components/loading'
import BottomTabs from './stacks/BottomTabs'

const Navigation = () => {
  const [user, setUser] = useState()
  const [loading, setLoading] = useState(true)
  const [initializing, setInitializing] = useState(true)

  const authChanged = onAuthStateChanged(auth, (user) => {
    setUser(user)
    if (initializing) setInitializing(false)
    setLoading(false)
  })

  useEffect(() => {
    const subscriber = authChanged
    return subscriber
  }, [])

  if (loading) {
    return <Loading />
  }

  const User = auth.currentUser

  return (
    <NavigationContainer>
      {User ? <BottomTabs /> : <AuthStack />}
    </NavigationContainer>
  )
}

export default Navigation

这是我的家。

const Home = createNativeStackNavigator()

const HomeStack = () => {
  return (
    <Home.Navigator>
      <Home.Screen
        name='Main'
        component={HomeScreen}
        options={{ headerTransparent: true, headerTitle: '' }}
      />
      <Home.Screen
        name='Recipe'
        component={RecipeScreen}
        options={{
          headerTransparent: false,
          headerStyle: {
            backgroundColor: Colors.darkNavy,
          },
          headerTitleStyle: {
            color: Colors.white,
          },
          headerTitleAlign: 'center',
          headerTintColor: Colors.white,
        }}
      />
    </Home.Navigator>
  )
}

接收堆栈。

const Recepies = createNativeStackNavigator()

const RecepiesStack = () => {
  return (
    <Recepies.Navigator >
      <Recepies.Screen
        name='Add recipe'
        component={AddRecipeScreen}
        options={{
          headerTransparent: false,
          headerStyle: {
            backgroundColor: Colors.darkNavy,
          },
          headerTitleStyle: {
            color: Colors.white,
          },
          headerTitleAlign: 'center',
          headerTintColor: Colors.white,
        }}
      />
    </Recepies.Navigator>
  )
}

还有我的底部标签。

const Tab = createBottomTabNavigator()

const BottomTabs = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName

          if (route.name === 'Home') {
            iconName = focused ? 'md-home' : 'md-home-outline'
          } else if (route.name === 'Recepies') {
            iconName = focused ? 'md-book' : 'md-book-outline'
          } else if (route.name === 'Profile') {
            iconName = focused ? 'md-person' : 'md-person-outline'
          }

          // You can return any component that you like here!
          return <Ionicons name={iconName} size={size} color={color} />
        },
        tabBarStyle: {
          backgroundColor: Colors.white,
          borderTopColor: Colors.jacarta,
        },
        tabBarActiveTintColor: Colors.red,
        tabBarInactiveTintColor: Colors.black,
        tabBarLabelStyle: {
          fontSize: 16,
          fontWeight: '600',
        },
        headerTransparent: true,
        headerTitle: '',
        headerTitleAlign: 'center',
      })}
    >
      <Tab.Screen name='Home' component={HomeStack} />
      <Tab.Screen name='Recepies' component={RecepiesStack} />
      <Tab.Screen name='Profile' component={ProfileScreen} />
    </Tab.Navigator>
  )
}

导航文件本身

const Navigation = () => {
  const [user, setUser] = useState()
  const [loading, setLoading] = useState(true)
  const [initializing, setInitializing] = useState(true)

  const authChanged = onAuthStateChanged(auth, (user) => {
    setUser(user)
    if (initializing) setInitializing(false)
    setLoading(false)
  })

  useEffect(() => {
    const subscriber = authChanged
    return subscriber
  }, [])

  if (loading) {
    return <Loading />
  }

  const User = auth.currentUser

  return (
    <NavigationContainer>
      {User ? <BottomTabs /> : <AuthStack />}
    </NavigationContainer>
  )
}

Answer 1

解决方法很简单。在底部的标签导航器中，我不得不更改 headerShown: true -> headerShown: false 并且导航再次工作。