Question

我有一个带有 Stack 和 bottomTab 导航器的项目，我想从 bottomTabNavigator 重定向到堆栈导航器页面

这是我的项目的代码： Routes.js 即堆栈导航器

<UserContext.Provider value={{userDetails, setUserDetails}}>
  <Stack.Navigator
    headerMode="screen"
    screenOptions={{
      header: ({scene, previous, navigation}) => {
        const {options} = scene.descriptor;
        const title =
          options.headerTitle !== undefined
            ? options.headerTitle
            : options.title !== undefined
            ? options.title
            : scene.route.name;

        return <Header title={title} />;
      },
    }}>
    {userDetails ? (
      <>
        <Stack.Screen
          name="home"
          options={{title: 'Home'}}
          component={BottomTabNavigator}
        />
        <Stack.Screen
          name="library"
          component={Library}
          options={() => ({
            headerTitle: 'My Library',
          })}
        />
        <Stack.Screen
          name="bookDetails"
          component={BookDetails}
          options={{title: 'Book Details'}}
        />
        <Stack.Screen
          name="reviews"
          component={AllReviews}
          options={{headerTitle: 'View all Reviews'}}
        />
      </>
    ) : (
      <Stack.Screen name="Login" component={Login} />
    )}
  </Stack.Navigator>
</UserContext.Provider>

bottomTabNavigator.js:

<Tab.Navigator
      tabBarOptions={{activeTintColor: 'green', style: {height: tabBarHeight}}}>
      <Tab.Screen
        name={'Home'}
        component={Home}
        options={{
          tabBarIcon: ({color}) => (
            <AntDesign name="home" size={27} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name={'Search'}
        component={Home}
        options={{
          tabBarIcon: ({color}) => (
            <AntDesign name="search1" size={25} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name={'My Library'}
        component={Library}
        options={{
          tabBarIcon: ({color}) => {
            return (
              <View
                style={{
                  position: 'absolute',
                  bottom: 7,
                  height: 65,
                  width: 65,
                  borderRadius: 65,
                  backgroundColor: 'green',
                  justifyContent: 'center',
                  alignItems: 'center',
                  shadowColor: '#000',
                  shadowOffset: {
                    width: 0,
                    height: 5,
                  },
                  shadowOpacity: 0.37,
                  shadowRadius: 7.49,

              elevation: 12,
            }}>
            <AntDesign name="book" size={40} color={'white'} />
          </View>
        );
      },
    }}
  />
  <Tab.Screen
    name={'Browse'}
    component={Home}
    options={{
      tabBarIcon: ({color}) => (
        <AntDesign name="earth" size={25} color={color} />
      ),
    }}
  />
  <Tab.Screen
    name={'More'}
    component={More}
    options={{
      tabBarIcon: ({color}) => (
        <Feather name="more-horizontal" size={30} color={color} />
      ),
    }}
  />
</Tab.Navigator>

我想要做的是当我在 tabNavigator 中点击我的图书馆时，headerTitle 仍然说家，我希望它说“” 这是我尝试实现这一目标的方法：

useLayoutEffect(() => {
    navigation.setOptions({headerTitle: 'My Library'});
  }, [navigation, route]);

感谢任何帮助

谢谢

Answer 1

我尝试自动执行但我无法弄清楚，但我所做的是在每个屏幕上使用我的自定义标题组件并对屏幕标题进行硬编码，因此该过程可能不如让反应导航有效做所有的工作，但它对我来说很好

Answer 2

您可以使用的一种解决方法是隐藏堆栈导航器主页组件中的标题。然后，您可以为每个标签屏幕创建自定义标题。

从bottomTabNavigator 重定向到堆栈导航器页面

2 个答案: