如何使用Flatlist导航到详细页

npm install @react-navigation/native

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { FlatList, TouchableOpacity, Text } from 'react-native';

const Stack = createStackNavigator();

const DetailScreen = ({ route }) => {
  const { itemId } = route.params;
  
  // 在这里根据itemId获取详细页的数据
  
  return (
    <Text>详细页</Text>
  );
};

const App = () => {
  const data = [
    { id: 1, title: '项目1' },
    { id: 2, title: '项目2' },
    { id: 3, title: '项目3' },
    // 其他项目数据...
  ];
  
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="主页">
          {() => (
            <FlatList
              data={data}
              keyExtractor={(item) => item.id.toString()}
              renderItem={({ item }) => (
                <TouchableOpacity
                  onPress={() => navigation.navigate('详细页', { itemId: item.id })}
                >
                  <Text>{item.title}</Text>
                </TouchableOpacity>
              )}
            />
          )}
        </Stack.Screen>
        <Stack.Screen name="详细页" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};