React Native 选项卡导航v5标题中特定选项卡屏幕的渲染按钮

qnakjoqk  于 2023-03-09  发布在  React
关注(0)|答案(3)|浏览(144)

无法呈现选项卡导航标题中的按钮
具有导航层次结构

  • 堆栈导航
  • 选项卡导航
  • 屏幕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",

ovfsdjhp

ovfsdjhp1#

嘿,抱歉迟到的答复,你可以这样做(1)在每个选项卡屏幕中,添加一个'焦点'事件侦听器到传递到每个屏幕的导航 prop :

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,您可以参考此链接

lyfkaqu1

lyfkaqu12#

约翰帮了我大忙。给他热烈的掌声。
我想在这里调整一些东西。
在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';

这里的路线完全基于您提供的route,它对be不起作用,因为我有一个很深的嵌套导航。如果您想使用此方法,您必须查看您提供的路线。更多信息https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state
我设法实现了这个,但是按钮排序的功能没有了。john提供的方法是最好的。我只是向你展示了我是如何实现它的。

7dl7o3gd

7dl7o3gd3#

我尝试了所有这些解决方案,但它不为我工作,我在react-native: 0.70.6react-native-cli: 2.0.1工作。
对于React Native0.70.6,危险获取父项已从获取父项更改。
下面是对我有效的解决方案。

const setHeaderOptions = () => {
    let value = navigation.getParent().setOptions({
      headerRight: () => <Text>ffedede</Text> ,
    });
  };

  const setOutHeaderOptions = () => {
    navigation.getParent().setOptions({
      headerRight: () => null,
    });
  };

  React.useLayoutEffect(() => {
    navigation.addListener('focus', setHeaderOptions);
    navigation.addListener('blur', setOutHeaderOptions);
  }, [navigation]);

相关问题