кнопки, не отображаемые в заголовке экспозиции реагируют на навигацию

Question

Я следовал этому учебнику, чтобы научиться реагировать на навигацию на выставке. в этом заголовке, когда я даю кнопку, она не отображается в заголовке. код ниже

export default function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={Homecomponent}
            options={{
              headerTitle: ()=> <Icon name="home" />,
              headerRight: () => (
                <Button
                  onPress={() => alert("This is a button!")}
                  title="Info"
                  color="#00cc00"
                />
              )
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
}

Кнопка headerRight не отображается.

TIA

Answer 1

 import { HeaderBackButton } from 'react-navigation-stack';
//import Ionicons from 'react-native-vector-icons/MaterialIcons';// add if you have this

   export default function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={Homecomponent}
            options={{
              headerTitle: ()=> <Icon name="home" />,
              headerRight: () => (
                <HeaderBackButton 
                  onPress={() => alert("This is a button!")}
                  //title="Info"
                  color="#00cc00"
                />
// Here you can add your icon to show info sample code for icon is 
// <Icon name="info" size={25}/>
              )
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
}

попробуйте этот код может быть полезным для вас