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}/>