无法呈现选项卡导航标题中的按钮
具有导航层次结构
- 堆栈导航
- 选项卡导航
- 屏幕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客户端:2.0.1
天然 reactjs :0.63.2
"@React导航/抽屉":"^5.8.7",
"@React导航/材料顶部选项卡":"^5.2.13",
"@React导航/原生":"^5.7.2",
"@React导航/堆栈":"^5.8.0",
3条答案
按热度按时间ovfsdjhp1#
嘿,抱歉迟到的答复,你可以这样做(1)在每个选项卡屏幕中,添加一个'焦点'事件侦听器到传递到每个屏幕的导航 prop :
(2)setHeaderOptions是一个函数,它使用dangerouslyGetParent对实际控制两个选项卡标题的父屏幕进行更改:
如果上述答案不适用于您的情况Header change in react navigation prbblem,您可以参考此链接
lyfkaqu12#
约翰帮了我大忙。给他热烈的掌声。
我想在这里调整一些东西。
在Manager.js中(在Home.js中,Manager.js由
component={Manager}
呈现)Manager.js
在我找到的文件里
这里的路线完全基于您提供的route,它对be不起作用,因为我有一个很深的嵌套导航。如果您想使用此方法,您必须查看您提供的路线。更多信息https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state
我设法实现了这个,但是按钮排序的功能没有了。john提供的方法是最好的。我只是向你展示了我是如何实现它的。
7dl7o3gd3#
我尝试了所有这些解决方案,但它不为我工作,我在
react-native: 0.70.6
react-native-cli: 2.0.1
工作。对于React Native0.70.6,危险获取父项已从获取父项更改。
下面是对我有效的解决方案。