如何在反应原生中单击平面列表中的项目来打开屏幕？

Question

I want to open screen when i press one of this items (images). I need to open Player screen in my app, so it have to be different screen for each item. Is there way to do that? Please help me. I cant find any solution on Google. Here is my code:

Here are my flatlist items (images):

class ReadingComponent extends Component {
    constructor(props: any) {
        super(props);
    }
    
    render() {
        
    let categories = [ 
        {
            name : "Category 1",
            img : require("../Assets/Slika.jpg"),
        },
        {
            name : "Category 2",
            img : require("../Assets/Slika.jpg"),
        },
        {
            name : "Category 3",
            img : require("../Assets/Slika.jpg"),
        },
      ];
        

Flatlist:

return (
            <View style={styles.container}>
                <FlatList
                    data={categories}
                    showsHorizontalScrollIndicator={false}
                    numColumns={categories.length / 5}
                    showsVerticalScrollIndicator={false}
                    renderItem = {({item, index}) => {
                        return (
                        <TouchableWithoutFeedback>
                        <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>
                        </TouchableWithoutFeedback>
                        );
                    }}
                />
            </View>
            
        );    
    }
}

Answer 1

2 things. First, you very rarely want to use TouchableWithoutFeedback. Users expect feedback when they touch something that they can interact with - such as a button.

If you are 100% sure you want it to be without feedback, then continue with that, but I think you likely will want TouchableOpacity instead.

The second thing is you are almost there. You need to add an onPress prop to your touchable tag. You will want to update your data source so that each ' item ' in it contains the information you need to be able to navigate to your correct screen. It may be as simple as including another variable named ' screenName ' or the like, or you could get as complicated as adding an entire function that you pass into your onPress event handler. Either way, you know your code better than I, but you just need to add a little data to your categories array.

EDIT: Here is an example using the screenName approach mentioned above.

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

    <TouchableOpacity
       onPress={() => {
          // navigate to screen named item.screenName
       }}
    >

Answer 2

Here is update of code.

Flatlist items:

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

onPress:

<TouchableOpacity onPress={() => item.screenName}}>

Answer 3

Here is solution of this problem, but still dont working, because Class have to be converted to Function.

Here is my Component screen. Here is Class but I want to convert that to Function...

Here is that Class component I want to convert to function:

class ReadingComponent extends Component {
    constructor(props: any) {
        super(props);

    }

    redirectTo(screenName: any) {
        useNavigation().navigate(`${screenName}`);
    }

Here are FlatList items:

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

Here is return and flatlist details:

        return (
            <View style={styles.container}>
                <FlatList
                    data={categories}
                    showsHorizontalScrollIndicator={false}
                    numColumns={categories.length / 5}
                    showsVerticalScrollIndicator={false}
                    renderItem = {({item, index}) => {
                        return (
                        <TouchableOpacity 
                            onPress={() => this.redirectTo(item.screenName)}>
                        </TouchableOpacity>
                        );
                    }}
                />
            </View>
            
        );    
    }
}