模板版本：v0.2.2

`react-navigation-header-buttons`

[Github 地址](https://github.com/vonovak/react-navigation-header-buttons)

安装与使用

三方库版本	支持RN版本
12.0.0	0.72
13.0.0	0.77

进入到工程目录并输入以下命令：

npm

# V12.0.0
npm i react-navigation-header-buttons@12.0.0

# V13.0.0
npm i react-navigation-header-buttons@13.0.0

yarn

# V12.0.0
yarn add react-navigation-header-buttons@12.0.0

# V13.0.0
yarn add react-navigation-header-buttons@13.0.0

在tsconfig.json文件中添加如下代码:

"compilerOptions": {
  ...
    "paths": {
    ...
      "react-navigation-header-buttons":[
        "./node_modules/react-navigation-header-buttons/lib/module/index.js"
      ]
    },
  }

下面的代码展示了这个库的基本使用场景：

使用时 import 的库名不变。

import * as React from 'react';
import {Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {HeaderButtonsProvider} from 'react-navigation-header-buttons/lib/module/providers/HeaderButtonsProvider';
import {
  HeaderButtons,
  Item,
  HiddenItem,
  OverflowMenu,
  Divider,
  ItemProps,
  HiddenItemProps,
  HeaderButtonProps,
  HeaderButton,
} from 'react-navigation-header-buttons/lib/module';


const stackType = 'native';
const Stack = createNativeStackNavigator();


export default function HeaderButtonExample() {
  return (
    <NavigationContainer>
      <HeaderButtonsProvider stackType={stackType}>
        <Stack.Navigator initialRouteName="react-navigation-header-buttons">
          <Stack.Screen
            name="UsageWithIcons"
            component={UsageWithIcons}
          />
        </Stack.Navigator>
      </HeaderButtonsProvider>
    </NavigationContainer>
  );
}
const MaterialIcons = (props: HeaderButtonProps) => {
  if(props.name === 'search'){
    return <Text>搜索</Text>
  }else{
    return <Text>更多</Text>
  }
}

const MaterialHeaderButton = (props: HeaderButtonProps) => (
  <HeaderButton IconComponent={MaterialIcons} iconSize={23} {...props} />
);

const EditItem = ({ onPress }: Pick<ItemProps, 'onPress'>) => {
  return <Item title="edit" onPress={onPress} />;
};

const ReusableHiddenItem = ({ onPress }: Pick<HiddenItemProps, 'onPress'>) => (
  <HiddenItem title="hidden2" onPress={onPress} disabled />
);

export function UsageWithIcons({ navigation }) {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      title: 'Demo',
      headerRight: () => (
        <HeaderButtons HeaderButtonComponent={MaterialHeaderButton}>
          <Item
            title="search"
            iconName="search"
            onPress={() => alert('search')}
          />
          <EditItem onPress={() => alert('Edit')} />
          <OverflowMenu
            OverflowIcon={({ color }) => (
              <MaterialIcons name="more-horiz" size={23} color={color} />
            )}
          >
            <HiddenItem title="hidden1" onPress={() => alert('hidden1')} />
            <Divider />
            <ReusableHiddenItem onPress={() => alert('hidden2')} />
          </OverflowMenu>
        </HeaderButtons>
      ),
    });
  }, [navigation]);

  return <Text>demo!</Text>;
}

Link

本库依赖以下三方库，请查看对应文档：

如已在鸿蒙工程中引入过该库，则无需再次引入，未引入请参照@react-navigation/native 文档、@react-navigation/elements 文档、@react-native-oh-library/react-native-safe-area-context 文档进行引入

约束与限制

兼容性

本文档内容基于以下版本验证通过：

RNOH: 0.72.26; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25; IDE：DevEco Studio 5.0.3.300SP2; ROM:3.0.0.24(Canary3);
RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107;