react-native - 如何从抽屉屏幕更新标题栏

Question

我正在使用 nested navigation .根导航器是 StackNavigator和 child 是 DrawerNavigator据我所知，无法通过 DrawerNavigator 放置标题栏.
所以我是通过 StackNavigator 做的但是当我浏览 DrawerNavigator 中的屏幕时，我无法更新标题标题.如何在 DrawerScreen 中更新标题标题
根导航器:

 <Stack.Navigator screenOptions={screenOptions} initialRouteName="Login">
    <Stack.Screen name="Login" component={Login} />
    // ...
    <Stack.Screen // This is the screen that contains a child navigator
      name="Main"
      component={Main}
      options={({navigation}) => ({
        title: 'Main Page',
        headerLeft: () => <MenuIcon stackNavigation={navigation} />,
      })}
    />
  </Stack.Navigator>

child 导航器:

<Drawer.Navigator>
     //...
      <Drawer.Screen
        name="Bids"
        component={Bids}
        options={{
          title: text.bids, // This updates the title that in the drawer navigator menu not the header bar title.
          headerTitle: () => <SearchBar />, //Also this doesn't work I can not update header bar specific to a DrawerComponent.
        }}
      />
      //...
    </Drawer.Navigator>

我尝试将 Stack Screen 的导航 Prop 传递给 Drawer Screens，但我找不到任何方法来做到这一点。

 <Drawer.Screen
        component={<Bids stackNavigation={navigation} />} // This does not compile :(
        //...
      />

我尝试使用 setOptions:

const Bids = ({navigation}) => {
  navigation.setOptions({title: 'Bids'});
  //...
};

但它再次更新抽屉菜单中的标题而不是标题栏标题。
如何从抽屉屏幕更新标题栏？

Answer 1

我能够得到它。我有以下设置。

首先 -> A Stack = Pre-Home + Home 标签

第二个 -> 底部标签

第三 -> 单个选项卡的堆栈，我们称之为内部堆栈

所以，我有一个堆栈 <-> 底部标签 <-> 内部堆栈。

在内部堆栈的屏幕更改时，我需要更新标题，它是我的父堆栈/根堆栈的一部分。

这可以通过父堆栈中的以下内容来完成。在您的根/父堆栈中具有以下内容

<Stack.Screen 
    name="Tabs"
    component={MyTabs}
    options={({ route, navigation }) => { 
        let currStackState = [];
        let currScreenName = null;
        if (route.state) {
            currStackState = route.state.routes[route.state.index].state;
            const currIndex = currStackState.index;
            currScreenName = (currStackState.routes[currIndex]).name;
        }

        let headerForScreen = getHeaderForRoute(currScreenName);
        // further common things if you want to add can add to above object headerForScreen
        return headerForScreen; 
}} 
/>

您的标题功能可能如下所示

const getHeaderForRoute = (routeName, stackName) => {
    //just kept stackName for future purpose, not using it.
  switch (routeName) {
    case 'Scree1':
    case 'MoreScreens':
    case '':
      return {
        headerShown: true,
        headerStyle: DeviceInfo.hasNotch()
          ? [styles1.headerBGColor, styles1.withNotch] : styles1.headerBGColor,
        headerTitle: '',
        headerLeft: () =>
          // Reactotron.log("route", route);
          (
            <View style={{
              flex: 1, marginLeft: 18, flexDirection: 'row',
            }}
            >
              {/* your component */}

            </View>
          ),
        headerRight: () => (

          <View style={{ marginRight: 15, flexDirection: 'row' }}>
            {/* your code*/}
          </View>
        ),
      };
    case 'SomeOther':
      return {
        headerShown: true,
        headerTitle: 'SomeTitle'
      };
    default:
      return {};
  }
};