@react-navigation/stack && @react-navigation/bottom-tabs (ok)
https://dev.to/paulobunga/navigating-react-native-app-with-react-navigation-5-4hn8
C:\Users\Administrator\Desktop\App\index.js
import { registerRootComponent } from 'expo';
import App from './App';
registerRootComponent(App);
C:\Users\Administrator\Desktop\App\App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from './src/navigation/AppNavigator';
export default function App() {
return (
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
);
}
C:\Users\Administrator\Desktop\App\src\navigation\AppNavigator.js
import * as React from 'react';
import { Button } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import MainTabs from './MainTabs';
import Blog from './Blog';
import BlogDetails from './BlogDetails';
const Stack = createStackNavigator();
const AppNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name='MainTabs' component={MainTabs} options={{ title: 'MainTabs' }} />
</Stack.Navigator>
);
}
export default AppNavigator;
C:\Users\Administrator\Desktop\App\src\navigation\MainTabs.js
import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Text, View, Button } from 'react-native';
import Home from './../screens/Home';
import Profile from './../screens/Profile';
import Contacts from './../screens/Contacts';
const Tabs = createBottomTabNavigator();
const MainTabs = () => {
return (
<Tabs.Navigator>
<Tabs.Screen name='Home' component={Home} />
<Tabs.Screen name='Profile' component={Profile} />
<Tabs.Screen name='Contacts' component={Contacts} />
</Tabs.Navigator>
);
}
export default MainTabs;
C:\Users\Administrator\Desktop\App\src\navigation\BlogDetails.js
import * as React from 'react';
import { Text, View, Button } from 'react-native';
const BlogDetails = () => {
return (
<View>
<Text>BlogDetails</Text>
<Button title="Go to Blog Details" onPress={() => this.props.navigation.navigate('MainTabs')} />
</View>
);
}
export default BlogDetails;
C:\Users\Administrator\Desktop\App\src\navigation\Blog.js
import * as React from 'react';
import { Text, View } from 'react-native';
const Blog = () => {
return (
<View>
<Text>Blog</Text>
</View>
);
}
export default Blog;
C:\Users\Administrator\Desktop\App\src\screens\Home.js
import React from 'react';
import {Text, View } from 'react-native';
class Home extends React.Component {
render() {
return (
<View>
<Text>Home</Text>
</View>
);
}
}
export default Home;
C:\Users\Administrator\Desktop\App\src\screens\Contacts.js
import React from 'react';
import {Text, View } from 'react-native';
class Contacts extends React.Component {
render() {
return (
<View>
<Text>Contacts</Text>
</View>
);
}
}
export default Contacts;
C:\Users\Administrator\Desktop\App\src\screens\Profile.js
import React from 'react';
import {Text, View } from 'react-native';
class Profile extends React.Component {
render() {
return (
<View>
<Text>Profile</Text>
</View>
);
}
}
export default Profile;