chore: reorganize directory

Author: zeevenn

example/src/navigation/index.tsx

@@ -1,10 +1,12 @@
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import IndexScreen from '../pages/IndexScreen';
+import HomeScreen from '../pages/HomeScreen';
+import TrackListScreen from '../pages/TrackListScreen';
 import PlayerScreen from '../pages/PlayerScreen';
 
 export type RootStackParamList = {
-  Index: undefined;
+  Home: undefined;
+  TrackList: undefined;
   Player: undefined;
 };
 
@@ -13,18 +15,26 @@ const Stack = createNativeStackNavigator<RootStackParamList>();
 export default function Navigation() {
   return (
     <NavigationContainer>
-      <Stack.Navigator>
+      <Stack.Navigator initialRouteName="Home">
         <Stack.Screen
-          name="Index"
-          component={IndexScreen}
+          name="Home"
+          component={HomeScreen}
           options={{ headerShown: false }}
         />
+        <Stack.Screen
+          name="TrackList"
+          component={TrackListScreen}
+          options={{
+            title: 'Track List',
+            headerBackTitle: 'Back',
+          }}
+        />
         <Stack.Screen
           name="Player"
           component={PlayerScreen}
           options={{
-            title: '正在播放',
-            headerBackTitle: '返回',
+            title: 'Player',
+            headerBackTitle: 'Back',
           }}
         />
       </Stack.Navigator>

example/src/pages/HomeScreen.tsx

@@ -0,0 +1,88 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  SafeAreaView,
+} from 'react-native';
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import type { RootStackParamList } from '../navigation';
+
+type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;
+
+export default function HomeScreen({ navigation }: Props) {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.title}>React Native Music Library</Text>
+        <Text style={styles.subtitle}>Get your music library</Text>
+
+        <View style={styles.buttonContainer}>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => navigation.navigate('TrackList')}
+          >
+            <Text style={styles.buttonText}>Track List</Text>
+            <Text style={styles.buttonSubtext}>
+              Browse and manage your music
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 60,
+    textAlign: 'center',
+  },
+  buttonContainer: {
+    width: '100%',
+    gap: 20,
+  },
+  button: {
+    backgroundColor: '#007AFF',
+    paddingVertical: 20,
+    paddingHorizontal: 30,
+    borderRadius: 12,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  buttonText: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#fff',
+    marginBottom: 4,
+  },
+  buttonSubtext: {
+    fontSize: 14,
+    color: 'rgba(255, 255, 255, 0.8)',
+  },
+});

example/src/pages/IndexScreen.tsx renamed to example/src/pages/TrackListScreen.tsx

@@ -22,9 +22,9 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { usePlayer } from '../contexts/PlayerContext';
 import { AudioPro, type AudioProTrack } from 'react-native-audio-pro';
 
-type Props = NativeStackScreenProps<RootStackParamList, 'Index'>;
+type Props = NativeStackScreenProps<RootStackParamList, 'TrackList'>;
 
-export default function IndexScreen({ navigation }: Props) {
+export default function TrackListScreen({ navigation }: Props) {
   const [tracks, setTracks] = useState<Track[]>([]);
   const [loading, setLoading] = useState(false);
   const { permissionStatus, requestPermissions } = usePermission();