Question

无法在“导航”标签的标题中呈现按钮

导航层次为

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

stack.js

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

Home.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-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”，

Answer 1

对不起，对于您的回复，请执行以下操作（1）在每个“选项卡”屏幕中，向传递到每个屏幕的导航道具添加“焦点”事件监听器：

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

（2）setHeaderOptions是一个函数，它使用dragonallyGetParent更改父屏幕，该屏幕实际上控制两个选项卡的标题：

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

如果在您的情况下，Header change in react navigation prbblem

不能解决上述问题，则可以引用此链接。

Answer 2

当约翰在这里帮助我时。为他鼓掌。

我想在这里调整一些其他内容。

在Manager.js中（在Home.js中，manager.js由component={Manager}呈现）

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

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

标签导航v5的标题中的特定标签屏幕的渲染按钮

2 个答案: