从 bottomTabNavigator 重定向到 Stack 导航器页面

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

您可以使用的一种解决方法是在 Stack 导航器的主页组件中隐藏 header。然后，您可以为每个选项卡屏幕创建自定义 header。

Answer 2

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

从 bottomTabNavigator 重定向到 Stack 导航器页面

Redirecting to a Stack navigator page from bottomTabNavigator

react-native

react-navigation

react-navigation-stack

react-navigation-bottom-tab