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

Question

我正在使用嵌套导航。据我所知，根导航器是 aStackNavigator并且 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>

儿童导航器：

<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>

我尝试将堆栈屏幕的导航道具传递给抽屉屏幕，但我找不到任何方法来做到这一点。

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

我尝试使用 setOptions：

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

但它再次更新抽屉菜单中的标题而不是标题栏标题。

如何从抽屉屏幕更新标题栏？

Answer 1

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

• 首先 -> 堆栈 = 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; 
}} 
/>

你的 header 函数可以是这样的

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 {};
  }
};