Блог

В настоящее время я создаю веб-приложение на языке react native, используя expo для Интернета.

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

В качестве решения я создал навигатор « NavBar.tsx » как отдельный компонент, и я импортирую этот компонент на каждый из своих экранов:

 import React, { useState } from 'react';
import { TouchableOpacity } from 'react-native';
import Navigation from '../../../navigation';

import { Text, View } from '../../Themed';
import styles from './styles';

import NavTabIcon from '../NavTabIcon';

const NavBar = ({ navigation }) => {
  return (
    <View>
      <NavTabIcon onPress={() => navigation.navigate('Buildings')} />
      <NavTabIcon onPress={() => navigation.navigate('Dashboard')} />
      <NavTabIcon onPress={() => navigation.navigate('Faults')} />
      <NavTabIcon onPress={() => navigation.navigate('Historian')} />
      <NavTabIcon />
      <NavTabIcon />
    </View>
  );
};

export default NavBar;
 

Вот мой главный вопрос: когда я перемещаюсь по приложению, а затем нажимаю кнопку «Назад» в браузере Chrome, он каждый раз возвращает меня на главный экран. Это не учитывает все остальные экраны, между которыми я перемещался.

Любая помощь будет очень признательна!!

Побочный вопрос: Как twitter обрабатывает свою панель навигации? Похоже, что это был отдельный компонент с функциями, записанными в каждую иконку/кнопку, которые перемещаются по их приложению (т. Е. navigation.navigate(HomeScreen) ).

Я не знаю, является ли это лучшей практикой, поэтому, если у кого-нибудь из вас есть рекомендации, это было бы очень полезно!

Кроме того, вот снимок моего linkingConfiguration.tsx , который я использую для обработки навигации по конечным точкам URL (я думаю, что это имеет смысл?):

 import { LinkingOptions } from '@react-navigation/native';
import * as Linking from 'expo-linking';

import { RootStackParamList } from '../../types';

const linking: LinkingOptions<RootStackParamList> = {
  prefixes: [Linking.makeUrl('/')],
  config: {
    screens: {
      Root: {
        screens: {
          Buildings: {
            path: 'buildings',
            screens: {
              BuildingsScreen: 'Buildings',
            },
          },
          Dashboard: {
            path: 'dashboard',
            screens: {
              TabTwoScreen: 'Dashboard',
            },
          },
          Faults: {
            path: 'faults',
            screens: {
              tabThreeSceen: 'Faults',
            },
          },
          Historian: {
            path: 'historian',
            screens: {
              tabFourScreen: 'Historian',
            },
          },
        },
      },
      Modal: 'modal',
      NotFound: '404',
      
    },
  },
};

export default linking;
 

и это вызывается в мой файл навигационного индекса:

 export default function Navigation({
  colorScheme,
}: {
  colorScheme: ColorSchemeName;
}) {
  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
    >
      <RootNavigator />
    </NavigationContainer>
  );
}
 

Единственное решение, которое я нашел, было это… и это было не очень хорошее решение:

В моем types.tsx файле у меня были навигаторы стека и типы навигации, объявленные:

 import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
import {
  CompositeScreenProps,
  NavigatorScreenParams,
} from '@react-navigation/native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

export type RootStackParamList = {
  Root: NavigatorScreenParams<RootTabParamList> | undefined;
  Modal: undefined;
  NotFound: undefined;
};

export type AuthStackParamList = {
  Signin: undefined;
};

export type RootStackScreenProps<Screen extends keyof RootStackParamList> =
  NativeStackScreenProps<RootStackParamList, Screen>;

export type RootTabParamList = {
  Buildings: undefined;
  Dashboard: undefined;
  Faults: undefined;
  Historian: undefined;
};

export type RootTabScreenProps<Screen extends keyof RootTabParamList> =
  CompositeScreenProps<
    BottomTabScreenProps<RootTabParamList, Screen>,
    NativeStackScreenProps<RootStackParamList>
  >;
 

Я изменил RootStackParamList на everyscreen, вместо того, чтобы иметь Root, в корневом каталоге содержатся четыре экрана, как показано ниже. поэтому в основном мне пришлось демонтировать свой корневой каталог и поместить его в список корневых параметров, эффективно изменив это:

 export type RootStackParamList = {
  Root: NavigatorScreenParams<RootTabParamList> | undefined;
  Modal: undefined;
  NotFound: undefined;
};
 

к этому:

 export type RootStackParamList = {
  Buildings: undefined;
  Dashboard: undefined;
  Faults: undefined;
  Historian: undefined;
  Modal: undefined;
  NotFound: undefined;
};
 

КОНЕЧНЫЙ РЕЗУЛЬТАТ: в итоге я переключился на маршрутизатор react. Это решение исправит одно и сломает другое…