版本：7.x

静态配置

静态配置的大部分是通过 createXNavigator 函数完成的，例如 createNativeStackNavigator、createBottomTabNavigator、createDrawerNavigator 等。在本指南的其余部分，我们将把这些函数称为 createXNavigator。

`createXNavigator`

createXNavigator 函数接受一个参数，它是一个具有以下属性的对象

与导航器组件相同的属性，例如 id、initialRouteName、screenOptions 等。有关它们接受的属性的更多详细信息，请参阅 Navigator 以及每个导航器的文档。
screens - 一个对象，包含导航器中每个屏幕的配置。
groups - 一个可选对象，包含屏幕组（等同于动态 API 中的 Group）。

例如

const RootStack = createNativeStackNavigator({
  initialRouteName: 'Home',
  screenOptions: {
    headerTintColor: 'white',
    headerStyle: {
      backgroundColor: 'tomato',
    },
  },
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});

`screens`

screens 对象可以包含键值对，其中键是屏幕的名称，值可以是以下几种

要渲染的组件

const RootStack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
  },
});

使用 createXNavigator 配置的导航器，用于嵌套导航器

const HomeTabs = createBottomTabNavigator({
  screens: {
    Groups: GroupsScreen,
    Chats: ChatsScreen,
  },
});

const RootStack = createNativeStackNavigator({
  screens: {
    Home: HomeTabs,
  },
});

一个对象，包含屏幕的配置。此配置包含各种属性

const RootStack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      linking: {
        path: 'home',
      },
    },
  },
});

有关更多详细信息，请参阅屏幕配置。

`groups`

groups 对象可以包含键值对，其中键是组的名称，值是组配置。

屏幕的配置对象接受 Group 页面中描述的属性。此外，当使用静态配置时，可以使用以下属性

if - 这可以用于条件性地渲染组，并且其工作方式与屏幕配置中的 if 属性相同。
screens - 一个对象，包含组中每个屏幕的配置。此配置与导航器配置中的 screens 对象相同。

示例

const RootStack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
  groups: {
    Guest: {
      if: useIsGuest,
      screenOptions: {
        headerShown: false,
      },
      screens: {
        // ...
      },
    },
    User: {
      if: useIsUser,
      screens: {
        // ...
      },
    },
  },
});

屏幕配置

屏幕的配置对象接受 Screen 页面中描述的属性。此外，当使用静态配置时，可以使用以下属性

`linking`

屏幕的链接配置。它可以是路径的字符串，也可以是包含链接配置的对象

const RootStack = createNativeStackNavigator({
  screens: {
    Profile: {
      screen: ProfileScreen,
      linking: {
        path: 'u/:userId',
        parse: {
          userId: (id) => id.replace(/^@/, ''),
        },
        stringify: {
          userId: (id) => `@${id}`,
        },
      },
    },
    Chat: {
      screen: ChatScreen,
      linking: 'chat/:chatId',
    },
  },
});

linking 对象支持配置链接中描述的相同配置选项，例如 parse、stringify 和 exact。

为了使深度链接在原生应用上工作，您还需要配置您的应用，并将 prefixes 传递给 createStaticNavigation 返回的导航组件

const Navigation = createStaticNavigation(RootStack);

const linking = {
  prefixes: ['https://example.com', 'example://'],
};

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

`if`

回调函数，用于确定是否应渲染屏幕。它不接收任何参数。这对于条件性地渲染屏幕非常有用，例如 - 如果您想为已登录用户渲染不同的屏幕。

您可以使用自定义 Hook 来使用自定义逻辑来确定返回值

const useIsLoggedIn = () => {
  const { isLoggedIn } = React.useContext(AuthContext);

  return isLoggedIn;
};

const RootStack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      if: useIsLoggedIn,
    },
  },
});

上面的示例仅在用户登录时渲染 HomeScreen。

有关更多详细信息，请参阅身份验证流程。

`createStaticNavigation`

createStaticNavigation 函数接受 createXNavigator 函数返回的静态配置，并返回一个要渲染的 React 组件

const Navigation = createStaticNavigation(RootStack);

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

此组件是 NavigationContainer 组件的包装器，并接受与 NavigationContainer 组件相同的属性和 ref。它旨在像您使用 NavigationContainer 组件一样，在您的应用根目录中渲染一次。

`linking` 属性的差异

与 NavigationContainer 类似，createStaticNavigation 返回的组件也接受 linking 属性。但是，有一些关键差异

无法将完整的 config 对象传递给 linking 属性。它只能接受 path 和根导航器的 initialRouteName。
链接配置是从屏幕配置中指定的 linking 属性收集的。

可以传递 enabled: 'auto' 以自动为所有叶子屏幕生成路径

const Navigation = createStaticNavigation(RootStack);

const linking = {
  enabled: 'auto',
  prefixes: ['https://example.com', 'example://'],
};

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

有关更多详细信息，请参阅自动路径生成是如何工作的。

`createComponentForStaticNavigation`

createComponentForStaticNavigation 函数接受 createXNavigator 函数返回的静态配置，并返回一个要渲染的 React 组件。第二个参数是组件的名称，该名称将用于 React DevTools 中

const RootStackNavigator = createComponentForStaticNavigation(
  RootStack,
  'RootNavigator'
);

返回的组件不接受任何属性。所有配置都从静态配置中推断出来。它本质上与使用动态 API 定义组件相同。

这看起来类似于 createStaticNavigation，但它们非常不同。当使用静态配置时，您永远不会直接使用此函数。您唯一会使用它的情况是，如果您正在从静态配置迁移出来，并且想重用您编写的现有代码，而不是将其重写为动态 API。有关更多详细信息，请参阅结合静态和动态 API。

`createPathConfigForStaticNavigation`

createPathConfigForStaticNavigation 函数接受 createXNavigator 函数返回的静态配置，并返回一个路径配置对象，该对象可以在链接配置中使用。

const config = {
  screens: {
    Home: {
      screens: createPathConfigForStaticNavigation(HomeTabs),
    },
  },
};

与 createComponentForStaticNavigation 类似，这旨在在从静态配置迁移出来时使用。有关更多详细信息，请参阅结合静态和动态 API。

createXNavigator​

screens​

groups​

屏幕配置​

linking​

if​

createStaticNavigation​

linking 属性的差异​

createComponentForStaticNavigation​

createPathConfigForStaticNavigation​