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

Для IOS дополнительный шаг:

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