介绍静态 API

2024年3月25日 ·5 分钟阅读

核心团队

使用 React Navigation 的两个主要痛点一直是 TypeScript 和深度链接配置。由于导航器的动态特性，需要手动维护 TypeScript 和深度链接配置以匹配导航结构。这可能容易出错且耗时。

为了解决这个问题，我们正在 React Navigation 7 中添加一个新的静态 API。它与 React Navigation 4 的 API 不同，但类似。许多应用程序不需要动态 API 提供的功能，它们可以使用更简单的静态 API 来简化其代码库。

注意

静态 API 是一个额外的可选 API。动态 API 不会消失，并将继续作为 React Navigation 的一流 API。事实上，静态 API 完全构建在动态 API 之上。

概述

使用动态 API，首先，我们导入一个函数，例如 createStackNavigator，然后我们使用它来定义屏幕 - 每个屏幕都有一个 name 和一个 component

const Stack = createStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

静态 API 遵循相同的原则。在这里，我们在一个名为 screens 的属性中指定屏幕，屏幕的名称是配置对象中的键，值包含要渲染的组件

const RootStack = createStackNavigator({
  screens: {
    Home: {
      screen: Home,
    },
    Profile: {
      screen: Profile,
    },
    Settings: {
      screen: Settings,
    },
  },
});

然后在编写导航配置后，我们调用 createStaticNavigation 并渲染返回的组件

const Navigation = createStaticNavigation(RootStack);

function App() {
  return <Navigation />;
}

此组件类似于 NavigationContainer，并接受 NavigationContainer 接受的大多数 props。因此，您可以在此处执行诸如跟踪屏幕更改、持久化导航状态等操作。

请参阅静态 API 参考以了解更多详情。

TypeScript

typescript 类型可以从带有 StaticParamList 类型的根导航器中推断出来，然后它们将在您使用 useNavigation 的任何地方可用。

我们唯一需要添加的额外代码是 RootParamList 接口的代码

declare global {
  namespace ReactNavigation {
    interface RootParamList extends StaticParamList<typeof RootStack> {}
  }
}

请参阅使用 TypeScript 进行类型检查以了解更多详情。

深度链接

深度链接 API 有 2 项改进

链接配置现在是导航配置的一部分，可以在屏幕旁边指定。这使得保持链接配置与导航结构同步更容易。

const RootStack = createStackNavigator({
  screens: {
    Profile: {
      screen: ProfileScreen,
      linking: {
        path: 'user/:id',
      },
    },
    Settings: {
      screen: SettingsScreen,
      linking: {
        path: 'settings',
      },
    },
  },
});

通过指定 enabled: 'auto'，路径可以从屏幕名称自动生成。这避免了为每个屏幕手动指定路径的需要。

const RootStack = createStackNavigator({
  screens: {
    // Generated path: ''
    Home: {
      screen: HomeScreen,
    },
    // Generated path: 'profile'
    Profile: {
      screen: ProfileScreen,
    },
    // Generated path: 'news-feed'
    NewsFeed: {
      screen: NewsFeedScreen,
    },
  },
});

const Navigation = createStaticNavigation(RootStack);

function App() {
  return (
    <Navigation
      linking={{
        prefixes: ['https://mychat.com', 'mychat://'],
        enabled: 'auto',
      }}
    >
      <Navigation />
    </Navigation>
  );
}

请参阅配置链接以了解更多详情。

身份验证流程

动态 API 的优点之一是声明式身份验证流程。您可以声明式地定义哪些屏幕可供已登录和访客用户使用，React Navigation 将自动处理显示适当的屏幕。为了保持类似的体验，我们在新的静态 API 中使用 if 属性添加了一些动态性

const RootStack = createNativeStackNavigator({
  screens: {
    Home: {
      if: useIsSignedIn,
      screen: HomeScreen,
    },
    SignIn: {
      if: useIsSignedOut,
      screen: SignInScreen,
    },
  },
});

if 属性接受一个返回布尔值的 Hook。当 Hook 返回 true 时，屏幕将包含在导航树中，当它返回 false 时，它将不会被包含。

请参阅身份验证流程以了解更多详情。

互操作性

由于我们在同一个库中有 2 个不同的 API，因此它们协同工作非常重要。这样，您可以使用静态 API 启动一个应用程序，但是如果您需要特定导航器的灵活性，则可以为该部分使用动态 API。或者您可能希望迁移到静态 API 以降低复杂性，并且通过互操作性，您可以逐步完成迁移。

请参阅结合静态和动态 API 以了解更多详情。

帮助我们测试

静态 API 目前在 React Navigation 7 alpha 中可用。您可以通过安装 React Navigation 包的 next 标签来试用它

yarn add @react-navigation/native@next @react-navigation/native-stack@next

除了静态 API 之外，React Navigation 7 还包括许多其他改进和新功能。请务必查看升级指南以了解所有更改。

我们很乐意获得社区关于它如何为您工作的反馈，并在稳定版本发布之前发现任何问题。如果您有任何反馈或建议，请在我们的 GitHub Discussions 论坛上告知我们。如果您发现任何问题，请在我们的 GitHub issues 上报告它们。

概述​

TypeScript​

深度链接​

身份验证流程​

互操作性​

帮助我们测试​

概述

TypeScript

深度链接

身份验证流程

互操作性

帮助我们测试