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

Question

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

导航层次结构为

• 堆栈导航

  • tabNavigation

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

我想在标题处呈现一个按钮

使用下面的代码来实现这一点

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

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

</Tab.Navigator>

预期行为

应该呈现标题上的按钮。

实际行为

没有按钮被渲染。

如何重现

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

我使用的版本

react native 客户端:2.0.1

native react :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)在每个选项卡屏幕中，向传递给每个屏幕的导航属性添加一个 'focus' 事件监听器:

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

(2) setHeaderOptions 是一个函数，它使用 dangerouslyGetParent 来更改实际控制两个选项卡标题的父屏幕:

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

如果上述答案对您的情况无效，您可以引用此链接 Header change in react navigation prbblem