在导航器内反应原生的多个 HeaderRight 按钮

Question

我想在 headerRight 导航选项上显示两个按钮，但是，react-navigation-header-buttons 似乎不允许多个标题按钮组件只使用一个。我想用一个无法工作的组件管理一些状态，因为我在我的导航器文件中/钩子不起作用，因为它不是一个功能组件。

文档：

这种方法显然行不通：

headerRight: (
<HeaderButtons HeaderButtonComponent={SoundButton}>
  <Item
    title="Sound" //key
    color="white"
  />
</HeaderButtons>
<HeaderButtons HeaderButtonComponent={ShareButton}>
   <Item
     title="Share" //key
     color="white"
   />
</HeaderButtons>
),

这种方法既不是：

headerRight: (
<HeaderButtons>
      <Item
        title="Sound" //key
        color="white"
        ??? component to call - ButtonElement = ?
      />
      <Item
        title="Share" //key
        color="white"
         ??? component to call - ButtonElement = ?
      />
</HeaderButtons>
)

声音按钮：

//React Deps
import React from "react";
import { HeaderButton } from "react-navigation-header-buttons";
import { useDispatch, useSelector } from "react-redux";

//Store
import * as soundActions from "../store/actions/sound-action";

//Misc
import { Ionicons } from "@expo/vector-icons";

const CustomHeaderButton = props => {
const sound = useSelector(state => state.sound.soundState);

const dispatch = useDispatch();

const soundButton = () => {
  dispatch(soundActions.toggleSound(sound));
};

  return (
    <HeaderButton
      {...props}
      IconComponent={Ionicons}
      iconSize={23}
      iconName={sound === "playing" ? "ios-volume-high" : "ios-volume-off"}
      onPress={soundButton}
    />
  );
};

export default CustomHeaderButton;

分享按钮：

//React Deps
import React from "react";
import { Share } from "react-native";
import { HeaderButton } from "react-navigation-header-buttons";

//Misc
import { Ionicons } from "@expo/vector-icons";

const CustomHeaderButton = props => {

  const shareButton = async () => {
    try {
      const result = await Share.share({
        message:
          "Message"
      });

      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      console.log(error.message);
    }
  };

  return (
    <HeaderButton
      {...props}
      IconComponent={Ionicons}
      iconSize={23}
      iconName="md-share"
      onPress={shareButton}
    />
  );
};

export default CustomHeaderButton;

想知道我有哪些选择？谢谢

Answer 1

@Gaurav Roy 提供的我糟糕的简单解决方案。只是将我的组件重构为自定义而不依赖于 HeaderButtons 组件。

 headerRight: (
 <View style={{flexDirection:"row"}}>
  <ShareButton />
  <SoundButton />
 </View>
 )

谢谢