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

Question

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

具有导航层次结构

• 堆栈导航

  • 标签导航

    • 屏幕 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>

预期行为

应呈现标题上的按钮。

实际行为

没有按钮正在呈现。

如何重现

应用程序.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

反应原生：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",

标签： javascriptreactjsreact-native

Answer 1

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

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

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

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

如果上述答案在您的情况下不起作用，您可以参考此链接反应导航 prbblem 中的标题更改