提问者:小点点

React Native中使用onPress打开屏幕时出现问题


我没有任何错误,但我仍然不能打开我想要的屏幕。 下面是我的公寓清单项目:

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

这是onPress的触摸不透明

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>

共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})>