Tab-navigation v5 的 header 中特定选项卡屏幕的渲染按钮

Question

无法在选项卡导航的 header 中呈现按钮

具有导航层次结构

• 堆栈导航

  • 标签导航

    • 屏幕 1
    • 屏幕 2
    • 屏幕 3

我想在 header 处渲染一个按钮

使用以下代码来实现这一点

<Tab.Navigator>
    <Tab.Screen name="My Shifts"
        options={{  tabBarLabel: 'My',
        headerRight: () => (
        <Button title="Update count" />
      ), }}
        component={Manager} 
     />

     <Tab.Screen ...... other Screens/>

</Tab.Navigator>

预期行为

应呈现 header 上的按钮。

实际行为

没有按钮正在呈现。

如何重现

应用程序.js

    import { NavigationContainer } from '@react-navigation/native';
    return (
     <NavigationContainer>
          <StackNavigation />
     </NavigationContainer>
    )

堆栈.js

    import { createStackNavigator } from '@react-navigation/stack';
    const Stack = createStackNavigator();
    return (
    <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} 
    </Stack.Navigator>
    )

主页.js

    import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
    const Tab = createMaterialTopTabNavigator();
    <Tab.Navigator>
        <Tab.Screen name="My Shifts"
            options={{  tabBarLabel: 'My',
            headerRight: () => (
            <Button title="Update count" />
          ), }}
            component={Manager} 
         />
    
         <Tab.Screen ...... other Screens/>
    
    </Tab.Navigator>

我正在使用的版本

反应原生 cli：2.0.1

react-native：0.63.2

"@react-navigation/drawer": "^5.8.7",

"@react-navigation/material-top-tabs": "^5.2.13",

"@react-navigation/native": "^5.7.2",

"@react-navigation/stack": "^5.8.0",

Answer 1

嘿抱歉回复晚了，你可以这样做（1）在每个选项卡屏幕中，为传递给每个屏幕的导航道具添加一个“焦点”事件侦听器：

function componentDidMount() 
{ 
this.props.navigation.addListener('focus', this.setHeaderOptions); 
} 

(2) setHeaderOptions 是一个 function ，它使用 dangerouslyGetParent 来更改实际上控制两个选项卡的 header 的父屏幕：

setHeaderOptions=()=> { 
this.props.navigation.dangerouslyGetParent().setOptions({headerRight: () => 
<AnythingYouWant/>}); };

如果上述答案在您的情况下无法解决，您可以参考此链接Header 更改反应导航问题

Answer 2

正如约翰在这里帮助我一样。 为他鼓掌。

我想在这里调整更多的东西。

在 Manager.js 中（在 Home.js 中， manager.js 由component={Manager}渲染）

管理器.js

setHeaderOptions=()=> { 
    this.props.navigation.dangerouslyGetParent().setOptions(
    {
        headerRight: () => (
            <View style={{marginRight:8,zIndex:2}}>
                <Button title="Sort" style={{color:"black"}} onPress= {this.sortbyName}/>
            </View>
        )
    }); 
};


setOutHeaderOptions = () =>{
    this.props.navigation.dangerouslyGetParent().setOptions(
    { 
        headerRight: () => null
    }); 
}

componentDidMount() {
       /* to remove the button : blur, to add : focus*/
    this.props.navigation.addListener('focus', this.setHeaderOptions); 
    this.props.navigation.addListener('blur',this.setOutHeaderOptions);      
}

在我发现的文档中

const routeName = getFocusedRouteNameFromRoute(route) ?? 'Feed';

这里的路线完全基于您提供的路线，因为我有一个深度嵌套的导航，所以它不起作用。 如果您想使用此方法，则必须查看您提供的路线。 更多信息https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state

我设法实现了这一点，但按钮排序的功能消失了。 约翰提供的方法是最好的。 我只是向你展示了我是如何实现它的。