反应本机中的无效挂钩调用问题

Question

I have problem with hook call in react native. I checked version of dom and react native and it looks right. I think the problem is function in my code, but I dont have any errors.

Here is my function:

function ReadingComponent () {

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

Here is flatlist:

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

And here are flatlist details with onPress:

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

Answer 1

You are denying React's Rules of Hooks : https://reactjs.org/docs/hooks-rules.html

useNavigation() is a hook and it cannot be called conditionally (eg in a function)

instead, you can write your code as follows:

 const navigation = useNavigation();
 const redirectTo = (screenName: any) => {
     navigation.navigate(`${screenName}`);
 }

I suggest reading the Rules of Hooks link carefully, and even for more deeper understanding you can search for how react hooks are implemented. Then you will truly know why order matters in React hooks.