Кнопка заголовка со значком в React Native

Question

Я создал образец приложения с помощью ReactNative. И я использовал ReactNative Navigation для навигации (Stack Navigation). В нем всего 2 экрана. Главный и подробный экран. Мне удалось успешно реализовать навигацию по стеку. Однако у меня возникают проблемы с добавлением значка для кнопки заголовка в правой части заголовка. Чтобы добавить кнопку заголовка со значком, я использовал стороннюю библиотеку под названием HeaderButtons. Однако при рендеринге отображается только заголовок, а не значок. Обратите внимание, что я использовал expo для создания реактивного проекта и значков из @ expo / vector-icons.

заранее спасибо, Йохан

// Это настраиваемый компонент заголовка

import React, { Component } from "react";
import { Platform } from "react-native";
import { HeaderButton } from "react-navigation-header-buttons";
import { Ionicons } from "@expo/vector-icons/Ionicons";


const CustomHeaderButton = (props) => {
  return (
    <HeaderButton
      {...props}
      IconComponent={Ionicons}
      iconSize={23}
      color={Platform.OS === "android" ? "white" : "blue"}
    />
  );
};

export default CustomHeaderButton;

// Это root навигация

import React, { Component } from "react";
import {Button} from'react-native'
import { createStackNavigator } from "@react-navigation/stack";

// import screens
import HomeScreen from "../screens/HomeScreen";
import DetailScreen from "../screens/DetailScreen";

import { HeaderButtons, Item } from "react-navigation-header-buttons";
import  {HeaderButton}  from "../component/HeaderButton";

const Stack = createStackNavigator();

function StackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerRight: ()=>(
            <HeaderButtons HeaderButtonComponent={HeaderButton}>
             <Item
               title="Header"
               iconName="ios-search"
               onPress={() => {
                 alert("Button clicked");
               }}
             />
           </HeaderButtons> 
         ),
        }}
      />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
}

export default StackNavigator;