React Native How to do OnClick function to bottom tab bar - reactjs

Question

In my project i did "handmade" tab bar without navigation.Firstly i preferred switch case, but now i understood, it cannot be without navigation.I want to change bottom tab navigation. Just i want to pass to other screens when i click bottom tabs but there is no function like "OnClick" in bottom tabs.My handmade router (App.js) menu takes some parameters something like that;
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import Login from './Login';
import Articles from './Articles';
import firebase from 'firebase';
import Loading from './Loading';
import Register from './Register';
import GotoSearch from './SearchItem';
import GiveDirection from './GiveDirection';
import Navigation from './Navigation';
class App extends Component {
constructor(props){
super(props);
this.setPage = this.setPage.bind(this);
this.setCurrentIndex = this.setCurrentIndex.bind(this);
this.setLastItem = this.setLastItem.bind(this);
this.state = { currentIndex: null, page: null, LastItem: {latitude : 0 , longitude : 0} };
}
state={
page:"login"
}
setPage(newpage) {
this.setState({page: newpage});
}
setCurrentIndex(id){
this.setState({currentIndex: id});
}
setLastItem(Item){
this.setState({LastItem:Item})
}
renderContent = () => {
switch (this.state.page) {
case "login":{
return <Login setPage={this.setPage}/>
}
case "articles":{
return <Articles
setPage={this.setPage}
setLastItem={this.setLastItem}
LastItem={this.state.LastItem}
/>
}
case "register":{
return <Register setPage={this.setPage}/>
}
case "gotosearch":{
return <GotoSearch
setPage={this.setPage}
currentIndex={this.state.currentIndex}
setCurrentIndex={this.setCurrentIndex} />
}
case "navigation":{
return <Navigation
setPage={this.setPage}
setLastItem={this.setLastItem}
LastItem={this.state.LastItem}
/>
}
case "givedirection":{
return <GiveDirection
setPage={this.setPage}
setLastItem={this.setLastItem}
LastItem={this.state.LastItem}
currentIndex={this.state.currentIndex}
setCurrentIndex={this.setCurrentIndex}
/>
}
default:
return <Loading />
}
}
I want to change from handmade menu to navigation menu
And this is the codes of the navigation menu I want to change
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { NavigationContainer } from '#react-navigation/native';
class HomeScreen extends React.Component {
/*constructor(props) {
super(props);
}
componentDidMount=() => {
this.props.setPage("articles");
}
*/
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SearchScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Search!</Text>
</View>
);
}
}
class LogoutScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Logout!</Text>
</View>
);
}
}
class RouteScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Route!</Text>
</View>
);
}
}
const Tab = createBottomTabNavigator();
const Tabs = () => {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Main" component={HomeScreen} />
<Tab.Screen name="Search" component={SearchScreen} />
<Tab.Screen name="Logout" component={LogoutScreen} />
<Tab.Screen name="Route" component={RouteScreen} />
</Tab.Navigator>
</NavigationContainer>
)
}
export default Tabs;