reactjs 如何在自定义头组件中获取屏幕标题？

62lalag4 于 2023-03-29 发布在 React

关注(0)|答案(5)|浏览(96)

希望没关系
我不能理解如何自定义头它应该工作。我只是想发送静态属性到我的头取决于路由选择。
我有：

export default AppNavigator = StackNavigator({
    Index:{
        screen: BottomNavigator,
    }
  },{
    navigationOptions: {
        header: AppHeader,
    },
    headerMode:'float',
  })

我的BottomNavigator是：

const BottomNavigator = TabNavigator({
    TabMenu1: { 
        screen: () => <Text> Resumé </Text>,
        navigationOptions: {
            title: 'Resumé'
        }
    },
    TabMenu2: {
        screen: () => <Text> Sells </Text>,
        navigationOptions: {
            title: 'Sells'
        }
    },
},{
    tabBarComponent: BottomNavigation
});

我希望在我的自定义头中有**{props.title}**，对吗？

附加信息：我的完整路由栈是：

AuthNavigator有一个连接到redux的 Package 器，并且有：

const AuthNavigator = StackNavigator({
  SignedIn: { 
    screen: MainNavigator
  }
 },{  
    headerMode:'none',
    initialRouteName: 'SignedIn'
  });

主导航：

const MainNavigator = StackNavigator({
    Drawer: { 
        screen: DrawerNav
    },
  }, {  
    headerMode:'none',
  });

抽屉导航：

const DrawerNav = DrawerNavigator({
    Menu1: {
        screen: AppNavigator
    },
}, {
    contentComponent: DrawerNavigation,
    drawerWidth: 300
});

AppNavigator和BottomNavigator如上所述

reactjs

来源：https://stackoverflow.com/questions/47184566/how-to-get-title-of-screen-in-custom-header-component

5条答案

按热度按时间

q3aa05251#

对于React Navigation 5，这是可行的

props.scene.descriptor.options.title

赞(0）回复(0）举报 2023-03-29

anhgbhbe2#

您可以像这样指定标题：

RouteName:
    {
        screen: RouteScreen,
        navigationOptions: ({navigation}) => ({
            title: navigation.state.params.title || 'StaticTitle'
        })
    }

其中navigation.state.params.title是导航时作为参数发送的标题（例如，如果您想添加变量）。如果您只想使用静态标题，只需使用title: 'StaticTitle'

赞(0）回复(0）举报 2023-03-29

z2acfund3#

export const Navigator = StackNavigator(routes, {
  headerMode: 'screen',
  navigationOptions: ({ navigation }) => ({
    header: props => <Header {...props} />,
  }),
})

我确实找到了一个工作，但它似乎相当冗长的什么似乎是一个常见的用例。

// Header.js
...
render() {
  const { getScreenDetails, scene } = this.props
  const details = getScreenDetails(scene)
  return (
    <View>
      <Text>{details.options.title}</Text>
    <View>
  )

赞(0）回复(0）举报 2023-03-29

6tr1vspr4#

对于React-Navigation v6，您可以从options属性中获取标题属性（和其他选项）：props.options.title .
这很有用，因为它在使用navigation.setOptions({ title: 'new title' });动态设置头标题时也有效
示例用法：

// in the navigator
<Stack.Navigator screenOptions={{header: (props) => <CustomHeaderComponent {...props} />}}>

// in your component
const CustomHeaderComponent = (props) => {
   const { title } = props.options;
}

赞(0）回复(0）举报 2023-03-29

monwx1rj5#

已解决，代码提取自react-navigation的Header.js文件：

在自定义标题中获取标题的正确方法是：

const sceneOptions = props.getScreenDetails(props.scene).options;
const sceneTitle = sceneOptions.title;

谢谢大家！

赞(0）回复(0）举报 2023-03-29

我来回答

reactjs 如何在自定义头组件中获取屏幕标题？

附加信息：我的完整路由栈是：

5条答案

相关问题

热门标签

最新问答