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>
);
}
}
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>
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.