Могу ли я отредактировать верхний заголовок React Navigation в React Native с помощью expo?

Question

Мой опыт работы с React, и я пытаюсь изучить React Native и начал свой первый проект с пустым шаблоном из expo. Я пытаюсь настроить реагирующую навигацию для управления своим навигационным стеком. Это мой файл навигации:

import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation'
import Home from '../containers/Home';
import Friends from '../containers/Friends';
import Cart from '../containers/Cart';
import { Button } from 'react-native';


const Navigator = createStackNavigator({
  Home: { 
          screen: Home,
  },
  Cart: { screen: Cart },
  Friends: { screen: Friends},
});

const AppNavigator = createAppContainer(Navigator)

export default AppNavigator

Я пытаюсь добавить кнопку справа от заголовка, например: Home: {screen: Home, options: {headerRight: () => (<Button onPress={()=>alert("it worls")} title="xx"

Когда я пытался добавить строку выше в свой навигация. js, приложение вылетело. Затем я попытался определить переменную stati c в Home. js (домашняя страница), используя что-то подобное:

static navigationOptions = {
        title: 'Explore', 
        options: {
            headerRight: () => (
                <Button onPress={()=>alert("IT WORKS")} title="click me"/>
            )
        }
    }

Эта строка смогла распечатать заголовок заголовка, но кнопка делает не загружается, что я делаю не так? Могу ли я это сделать или это приведет только к большему количеству ошибок? Любая помощь приветствуется, большое спасибо!