Web Expo 中的 React Navigation - 浏览器后退按钮问题

Question

我目前正在使用 expo for web 构建一个 web 应用程序，在本机反应中。

我不确定处理导航的最佳方式，并且我不想在 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)）。

我不知道这是否是最佳做法，所以如果你们有任何建议，那将非常有帮助！

另外，这是我用来处理 url 端点导航的 linkingConfiguration.tsx 的快照（我认为这很有意义？）：

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>
  );
}

Answer 1

我找到的唯一解决方案是这个......而且它不是一个很好的解决方案：

在我的 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，在 rootstack 中包含四个屏幕，如下所示。所以基本上我不得不拆除我的 rootstacktab 并将其放入 RootStackParamList 中，有效地改变了这一点：

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

最终结果：我最终切换到反应路由器。此解决方案将解决一件事并破坏另一件事...