Javascript 如何在React Native中将类转换为函数？

这是我的组件屏幕。这是一个类，但我想把它转换成函数

下面是我要转换为函数的类组件：

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

    }

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

以下是平面列表项：

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

以下是退货和扁平件清单的详细信息：

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

返回(
{
返回(
this.redirectTo（item.screenName）}>
);
}}
/>
);    
}
}

导出默认值（道具）=>{
const redirectTo=（屏幕名称：any）=>{
useNavigation（）.navigate（`${screenName}`）；
}
常量类别=[
{
名称：“1类”，
img:require（“../Assets/Slika.jpg”），
屏幕名称：“玩家”，
},
{
名称：“第2类”，
img:require（“../Assets/Slika.jpg”），
屏幕名称：“Player1”，
},
];
返回(
{
返回(
重定向到（item.screenName）}>
);
}}
/>
);    
}

检查React docs，很简单：我认为这是答案，最好在答案上添加一些解释，而不是在代码中给出一个直接的答案。你是对的。我也不喜欢没有解释的情况，但在这种情况下，我搜索了可以添加的内容，但没有找到。

export default (props) => {
    
    const redirectTo = (screenName: any) => {
        useNavigation().navigate(`${screenName}`);
    }
        
    const categories = [ 
        {
            name : "Category 1",
            img : require("../Assets/Slika.jpg"),
            screenName : "Player",
        },
        {
            name : "Category 2",
            img : require("../Assets/Slika.jpg"),
            screenName : "Player1",
        },
    ];

    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)}>
                        </TouchableOpacity>
                        );
                    }}
                />
            </View>
        );    
}