React Native
September 22, 2021
Делаем навигацию в React Native
Устанавливаем как написано в документации https://reactnative.dev/docs/navigation:
yarn add @react-navigation/native @react-navigation/native-stack yarn add react-native-screens react-native-safe-area-context
npx pod-install
Теперь нужно обернуть все наше приложение в контейнер навигации NavigationContainer. Обычно это делается в App.js или index.js
import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; const App = () => { return ( <NavigationContainer> {/* Rest of your app code */} </NavigationContainer> ); }; export default App;
import React from 'react'; import {Text, Button} from 'react-native'; import {NavigationContainer} from '@react-navigation/native'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; const Stack = createNativeStackNavigator(); const HomeScreen = ({navigation}) => { return ( <Button title="Go to Jane's profile" onPress={() => navigation.navigate('Profile', {name: 'Jane'})} /> ); }; const ProfileScreen = ({navigation, route}) => { return <Text>This is {route.params.name}'s profile</Text>; }; const App = () => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} options={{title: 'Welcome'}} /> <Stack.Screen name="Profile" component={ProfileScreen} /> </Stack.Navigator> </NavigationContainer> ); }; export default App;
react-navigation использует нативные API: UINavigationController на iOS и Fragment на Android, поэтому навигация, созданная с помощью createNativeStackNavigator, будет вести себя так же и иметь те же характеристики производительности, что и приложения, созданные на базе этих API.
PS Если надо спрятать хидер и использовать весь экран:
<Stack.Screen options={{headerShown: false}} name="Home" component={HomeScreen}/>