Полное руководство по реагированию на навигацию с использованием реагирования

npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

Основные концепции

React Navigation построена вокруг трех основных блоков:

• Навигационный контейнер — самая внешняя обертка, управляющая деревом навигации и состоянием.
• Навигаторы — компоненты, определяющие схему навигации (стек, вкладка, ящик).
• Screens — отдельные компоненты, которые представляют вид или страницу в приложении.

Каждая навигация должна быть обернута в . Этот контейнер обычно помещается в корневую часть компонента приложения.

Настройка стекового навигатора

Навигатор стека управляет стеком экранов «последний в первом». Он использует переходные анимации и жесты нативной платформы по умолчанию.

Во-первых, импортировать необходимые модули:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

Создайте экземпляр навигатора стека:

const Stack = createNativeStackNavigator();

Определите навигатор внутри компонента приложения:

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Каждый требует опоры (используется для навигации) и опоры (компонент React для рендеринга).

Создание экранов и навигация

Экраны являются стандартными компонентами React. Они получают два важных реквизита: и . Объект предоставляет способы перемещения между экранами. Ниже приведен типичный домашний экран:

function HomeScreen({ navigation }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Home Screen</Text>
 <Button
 title="Go to Details"
 onPress={() => navigation.navigate('Details')}
 />
 </View>
 );
}

Экран «Деталь» не должен использовать навигационный реквизит, если ему не нужно перемещаться дальше.

function DetailsScreen({ route }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Details Screen</Text>
 </View>
 );
}

Методы навигации

React Navigation предоставляет несколько методов с помощью :

• navigate(имя, парам) — перемещается на экран, повторно используя существующий экземпляр, если он существует в стеке.
• push(имя, парам) — всегда нажимает на стек новый экран, даже если тот же экран уже находится в стеке.
• goBack() — переходит на предыдущий экран в стеке.
• заменить (имя, парам) — заменить текущий экран новым, удалив ток из истории.
• reset(state) — перезагружает всё состояние навигации к заданному объекту состояния.

Например, чтобы нажать новый экземпляр экрана Детали и пропустить параметры:

navigation.push('Details', { itemId: 42, otherParam: 'anything' });

Прохождение параметров между экранами

Данные могут быть переданы на экран через второй аргумент или . Получающий экран получает доступ к этим параметрам через .

// In HomeScreen
navigation.navigate('Details', { userId: 123 });

// In DetailsScreen
function DetailsScreen({ route }) {
 const { userId } = route.params;
 return <Text>User ID: {userId}</Text>;
}

Установите значения параметров по умолчанию, используя на компоненте экрана:

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 0 }}
/>

Конфигурация навигационных опций

Каждый экран может настроить свой заголовок, значок вкладки, ярлык ящика и т. Д., Используя реквизит на или реквизит на навигаторе.

Настройка заголовка

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 options={{
 title: 'Details',
 headerStyle: { backgroundColor: '#f4511e' },
 headerTintColor: '#fff',
 headerTitleStyle: { fontWeight: 'bold' },
 }}
/>

Динамические параметры могут быть установлены с помощью функции, которая получает :

options={({ route }) => ({ title: route.params.name })}

Навигатор Tab

Навигация по вкладкам является общим для секций приложений верхнего уровня. Установите навигатор нижних вкладок:

npm install @react-navigation/bottom-tabs

Создайте навигатор вкладки и объедините его со стеком:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeTabs() {
 return (
 <Tab.Navigator>
 <Tab.Screen name="Feed" component={FeedScreen} />
 <Tab.Screen name="Profile" component={ProfileScreen} />
 </Tab.Navigator>
 );
}

Вы можете вставить навигатор вкладок в навигатор стека или наоборот. Настройте значки вкладок, используя реквизит с .

Навигатор-чертежник

Навигатор выдвигает ящик слева, раскрывая навигационные элементы. Установите его:

npm install @react-navigation/drawer

Пример установки:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
 return (
 <Drawer.Navigator>
 <Drawer.Screen name="Home" component={HomeScreen} />
 <Drawer.Screen name="Settings" component={SettingsScreen} />
 </Drawer.Navigator>
 );
}

Используйте , чтобы открыть и закрыть ящик программно.

Навигаторы Nested

Сложные приложения часто гнездят навигаторы (например, навигатор вкладок внутри навигатора стека). Реагирование навигация обрабатывает гнездование изящно. Реквизит , предоставленный любому экрану, может вызывать методы на родительском навигаторе, если это необходимо. Используйте для доступа к методам родительского навигатора.

Пример: стек, содержащий навигатор вкладки и экран настроек:

function RootStack() {
 return (
 <Stack.Navigator>
 <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
 <Stack.Screen name="Settings" component={SettingsScreen} />
 </Stack.Navigator>
 );
}

Глубокие и глубокие связи

React Navigation поддерживает глубокие ссылки для обработки URL-адресов, которые открывают определенные экраны. Настройте Реквизит :

const linking = {
 prefixes: ['myapp://', 'https://myapp.com'],
 config: {
 screens: {
 Home: 'home',
 Details: 'details/:itemId',
 },
 },
};

<NavigationContainer linking={linking}>
 {/* navigators */}
</NavigationContainer>

Затем обработайте входящие URL-адреса. Это позволяет использовать такие функции, как push-уведомления, ссылающиеся на конкретный экран.

Поток аутентификации

Многие приложения требуют условной навигации на основе состояния аутентификации.Обычным шаблоном является переключение навигатора на корневом уровне:

function App() {
 const [isSignedIn, setIsSignedIn] = useState(false);

 return (
 <NavigationContainer>
 {isSignedIn ? <AppNavigator /> : <AuthNavigator />}
 </NavigationContainer>
 );
}

В качестве альтернативы, используйте один стек с условными экранами. Избегайте мерцания, сохраняя обещание или состояние в актуальном состоянии.

Производительность и лучшие практики

• Используйте навигатор стека для лучшей производительности и нативных переходов (не ).
• Минимизируйте количество установленных одновременно экранов. React Navigation по умолчанию размещает скрытые экраны для стековых навигаторов, но для навигаторов вкладок можно настроить ленивую загрузку.
• Пропускать только примитивные данные через параметры, чтобы избежать проблем с сериализацией.
• Используйте или для компонентов экрана, которые часто перезаписываются.
• Избегайте тяжелых вычислений во время переходов навигации; работа с выгрузкой .
• Вместо этого, введите [[48]], чтобы изменить [[[48]].

Заключение

React Navigation обеспечивает интуитивно понятный, настраиваемый и эффективный способ управления навигацией в приложениях React Native. Овладев стеком, вкладкой, ящиком и вложенными навигаторами, а также потоками прохождения параметров, глубоких ссылок и аутентификации, вы можете создать надежные мобильные интерфейсы. Для получения дополнительной информации обратитесь к официальной документации React Navigation и React Native Navigation Guide. Также рассмотрите возможность чтения статей сообщества о React Navigation best practices для уточнения ваших реализаций.