// import {Text, View} from 'react-native'
// import * as React from 'react';
// import { NavigationContainer } from '@react-navigation/native';
// import { createNativeStackNavigator } from '@react-navigation/native-stack';

// const Stack = createNativeStackNavigator();

// function Home() {
//     return (
//       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
//         <Text>Home Screen</Text>
//       </View>
//     );
//   }
// function Profile() {
//     return (
//       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
//         <Text>Profile Screen</Text>
//       </View>
//     );
//   }
// function Settings() {
//     return (
//       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
//         <Text>Settings Screen</Text>
//       </View>
//     );
//   }



// function NativeStackDemo() {
//   return (
//     <NavigationContainer>
//     <Stack.Navigator
//       initialRouteName="Home"
//       screenOptions={{
//         headerTintColor: 'white',
//         headerStyle: { backgroundColor: 'tomato' },
//       }}
//     >
//       <Stack.Screen
//         name="Home"
//         component={Home}
//         options={{
//           title: 'Awesome app',
//         }}
//       />
//       <Stack.Screen
//         name="Profile"
//         component={Profile}
//         options={{
//           title: 'My profile',
//         }}
//       />
//       <Stack.Screen
//         name="Settings"
//         component={Settings}
//         options={{
//           gestureEnabled: false,
//         }}
//       />
//     </Stack.Navigator>
//     </NavigationContainer>
//   );
// }
// export default NativeStackDemo;



// App.js

// import React from 'react';
// import { NavigationContainer } from '@react-navigation/native';
// import { createNativeStackNavigator } from '@react-navigation/native-stack';
// import { Text, View, Button } from 'react-native';

// function HomeScreen({ navigation }) {
//   return (
//     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
//       <Text>Home Screen</Text>
//       <Button
//         title="Go to Details"
//         onPress={() => navigation.navigate('Details')}
//       />
//     </View>
//   );
// }

// function DetailsScreen({ navigation }) {
//   return (
//     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
//       <Text>Details Screen</Text>
//       <Button
//         title="Go back"
//         onPress={() => navigation.goBack()}
//       />
//     </View>
//   );
// }

// const Stack = createNativeStackNavigator();

// export default function App() {
//   return (
//     <View>
//     <NavigationContainer>
//       <Stack.Navigator>
//         <Stack.Screen name="Home" component={HomeScreen} />
//         <Stack.Screen name="Details" component={DetailsScreen} />
//       </Stack.Navigator>
//     </NavigationContainer>
//     </View>
//   );
// }


// import * as React from 'react';
// import { View, Text } from 'react-native';
// import { NavigationContainer } from '@react-navigation/native';
// import { createNativeStackNavigator } from '@react-navigation/native-stack';

// function HomeScreen() {
//   return (
//     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
//       <Text>Home Screen</Text>
//     </View>
//   );
// }

// const Stack = createNativeStackNavigator();

// function App() {
//   return (
//     <NavigationContainer>
//       <Stack.Navigator>
//         <Stack.Screen name="Home" component={HomeScreen} />
//       </Stack.Navigator>
//     </NavigationContainer>
//   );
// }

// export default App;



import * as React from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { enableScreens } from 'react-native-screens';
import { Graph } from 'metro';
 
enableScreens(false)

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'pink'}}>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile')} 
      />
    </View>
  );
}

function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'purple' }}>
      <Button
        title="Go to Notifications"
        onPress={() => navigation.navigate('Notifications')}
      />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'green' }}>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'orange' }}>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
    initialRouteName="Home"
          screenOptions={{
            headerTintColor: 'blue', //后退按钮和标题的颜色
            headerStyle: { backgroundColor: 'red' }, //ok
            headerBackTitle: 'Album', //no
            // headerBackTitleVisible: true, // 隐藏返回按钮的标题
            headerBackVisible: true, // 隐藏返回按钮
            // headerBackButtonMenuEnabled: false, // 启用返回按钮菜单
            // title: 'My App', // 设置屏幕的默认标题
            headerShown: true, //隐藏标头，默认为true  ok
            headerTransparent: false, // ok
            headerBlurEffect: 'dark',
            // headerTitle:'你好',
            headerTitleAlign: 'center',
            headerTitleStyle: { fontWeight: 'bold' },
            // headerRight: () => <Button title="Custom Back" onPress={() => navigation.goBack()} />,
            animationTypeForReplace: "pop",
            animation: "slide_from_right",
          }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Notifications" component={NotificationsScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}