Глоссарий терминов¶

Навигатор¶

Навигатор (Navigator) - это React-компонент, который решает, как отображать заданные экраны. В качестве дочерних элементов он содержит элементы Screen для определения конфигурации экранов.

NavigationContainer - это компонент, который управляет нашим навигационным деревом и содержит navigation state. Этот компонент должен обернуть всю структуру навигаторов. Обычно мы размещаем этот компонент в корне нашего приложения, который, как правило, является компонентом, экспортируемым из App.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

function App() {
    return (
        <NavigationContainer>
            {/* Навигатор */}
            <Stack.Navigator>
                <Stack.Screen
                    name="Home"
                    component={HomeScreen}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

Маршрутизатор¶

Маршрутизатор - это набор функций, которые решают, как обрабатывать действия и изменения состояния в навигаторе (аналогично редукторам в приложениях Redux). Обычно вам никогда не нужно взаимодействовать с маршрутизатором напрямую, если только вы не пишете собственный навигатор.

Компонент экрана¶

Компонент экрана - это компонент, который мы используем в конфигурации маршрута.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

const Stack = createNativeStackNavigator();

const StackNavigator = (
    <Stack.Navigator>
        <Stack.Screen
            name="Home"
            component={HomeScreen} // <----
        />
        <Stack.Screen
            name="Details"
            component={DetailsScreen} // <----
        />
    </Stack.Navigator>
);

Суффикс Screen в имени компонента является совершенно необязательным, но часто используемым соглашением; мы могли бы назвать его Michael, и это работало бы точно так же.

Ранее мы видели, что наши экранные компоненты снабжены реквизитом navigation. Важно отметить, что это происходит только в том случае, если экран отображается как маршрут с помощью React Navigation (например, в ответ на команду navigation.navigate). Например, если мы отобразим DetailsScreen как дочерний экран HomeScreen, то DetailsScreen не получит свойства navigation, и при нажатии кнопки "Go to Details... again" на главном экране приложение выбросит одно из квинтэссенциальных исключений JavaScript "undefined is not an object".

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

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

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

Навигационный пропс¶

Этот реквизит будет передаваться всем экранам, и его можно использовать для следующих целей:

• dispatch отправит действие на маршрутизатор
• navigate, goBack и т.д. доступны для диспетчеризации действий удобным способом

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

Подробнее об этом см. в документе "Навигационный пропс документа".

В разделе "Ссылка на пропс маршрута" более подробно рассматривается этот вопрос, описываются обходные пути, а также приводится информация о других свойствах, доступных для свойства route.

Маршрутный пропс¶

Этот реквизит будет передаваться на все экраны. Содержит информацию о текущем маршруте, т.е. params, key и name.

Состояние навигации¶

Состояние навигатора в общем случае выглядит примерно так:

1
2
3
4
5
6
7
8

{
    key: 'StackRouterRoot',
    index: 1,
    routes: [
        { key: 'A', name: 'Home' },
        { key: 'B', name: 'Profile' },
    ]
}

Для данного состояния навигации существует два маршрута (которые могут быть вкладками или карточками в стопке). Индекс указывает на активный маршрут, которым является "B".

Подробнее о состоянии навигации можно прочитать здесь.

Маршрут¶

Каждый маршрут представляет собой объект, содержащий ключ для его идентификации и "имя" для обозначения типа маршрута. Он также может содержать произвольные параметры:

1
2
3
4
5

{
    key: 'B',
    name: 'Profile',
    params: { id: '123' }
}

Заголовок¶

Также известен как навигационный заголовок, панель навигации, панель приложений и, вероятно, многие другие. Это прямоугольник в верхней части экрана, который содержит кнопку "Назад" и заголовок экрана. Весь прямоугольник часто называют заголовком в React Navigation.

Ссылки¶

• Glossary of terms

Комментарии