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

【问题标题】：How to update header bar from drawer screen如何从抽屉屏幕更新标题栏
【发布时间】：2020-08-05 18:07:17
【问题描述】：

我正在使用nested navigation。据我所知，根导航器是StackNavigator，子导航器是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>

我尝试将 Stack Screen 的导航属性传递给 Drawer Screens，但找不到任何方法。

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

我尝试使用 setOptions：

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

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

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

【问题讨论】：

你拿到了吗？
是的，但我是通过 redux 实现的，我认为这不是解决此类简单问题的好方法。但是，如果您希望我可以分享我的解决方案。但这不是最佳实践。

标签： react-native react-navigation react-navigation-stack react-navigation-drawer react-navigation-v5

【解决方案1】：

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

首先 -> A Stack = Pre-Home + Home tabs
第二个 -> 底部标签
第三个 -> 单个选项卡的堆栈，我们称之为内部堆栈

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

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

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

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

【讨论】：

我花了很多时间来挖掘这个答案谢谢你的详细回答它对我帮助很大。

【解决方案2】：

我通过设置得到this结果

<DrawerNavigator screenOptions = {{headerShow:true}}>
   <Drawer.Screen component={Home} name="Home" options={{ title: "Not Home" }} />
</Drawer.Navigator>

你可以像StackNavigator一样设置标题

【讨论】：