在 React Native 中使用 onPress 打开屏幕的问题

Question

我没有任何错误，但我仍然无法打开我想要的屏幕。这是我的 FlatList 项目：

let categories = [ 
        {
            screenName : Player,
            name : "Category 1",
            img : require("../Assets/Slika.jpg"),
        },

这是带有 onPress 的 TouchableOpacity

return (
            <View style={styles.container}>
                <FlatList
                    data={categories}
                    showsHorizontalScrollIndicator={false}
                    numColumns={categories.length / 5}
                    showsVerticalScrollIndicator={false}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem = {({item, index}) => {
                        return (
                        <TouchableOpacity onPress={() => item.screenName}>
                        <Surface style={styles.surface}>
                            <ImageBackground
                            source={item.img} 
                            style={styles.img}
                            blurRadius={0.5}>
                        <Icon name="music" color="#fff" size={22}/>
                        <Text style={styles.name}>{item.name}</Text>
                            </ImageBackground>
                        </Surface>
                        </TouchableOpacity>
                        );
                    }}
                />
            </View>

Answer 1

你必须使用导航：

import { useNavigation } from '@react-navigation/native';
...
export default function ClassName() {
const navigation = useNavigation();

function navigateTO(pageName) {
 navigation.navigate(pageName);
}
<TouchableOpacity onPress={navigateTO(item.screenName})>