useLinkProps

useLinkProps 钩子让我们可以构建自定义链接组件。链接组件可用作导航到屏幕的按钮。在 Web 上，它将渲染为具有 href 属性的锚标记 (<a>)，以便保留链接的所有可访问性功能，例如 - 例如 Right click -> Open link in new tab"、Ctrl+Click/⌘+Click 等。

¥The useLinkProps hook lets us build our custom link component. The link component can be used as a button to navigate to a screen. On the web, it will be rendered as an anchor tag (<a>) with the href attribute so that all the accessibility features of a link are preserved, e.g. - such as Right click -> Open link in new tab", Ctrl+Click/⌘+Click etc.

它返回一个带有一些可以传递给组件的 props 的对象。

¥It returns an object with some props that you can pass to a component.

示例：

¥Example:

import { useLinkProps } from '@react-navigation/native';

// ...

const LinkButton = ({ screen, params, action, href, children, ...rest }) => {
  const props = useLinkProps({ screen, params, action, href });

  const [isHovered, setIsHovered] = React.useState(false);

  return (
    <Pressable {...props} {...rest}>
      <Text>{children}</Text>
    </Pressable>
  );
};

然后你可以在应用的其他位置使用 LinkButton 组件：

¥Then you can use the LinkButton component elsewhere in your app:

function Home() {
  return (
    <LinkButton screen="Profile" params={{ id: 'jane' }}>
      Go to Jane's profile
    </LinkButton>
  );
}

选项

¥Options

screen 和 params

¥screen and params

你可以传递 screen 和 params 以在按下时导航到屏幕：

¥You can pass screen and params to navigate to a screen on press:

function Home() {
  return (
    <LinkButton screen="Profile" params={{ id: 'jane' }}>
      Go to Jane's profile
    </LinkButton>
  );
}

如果你想要导航到嵌套屏幕，则可以在 params 中传递 screen 的名称，类似于 在嵌套导航器中导航到屏幕：

¥If you want to navigate to a nested screen, you can pass the name of the screen in params similar to navigating to a screen in a nested navigator:

<LinkButton screen="Root" params={{ screen: 'Post', params: { id: 123 }}}>
  Go to post 123
</LinkButton>

action

有时我们希望页内导航有不同的行为，例如 replace 而不是 navigate。我们可以使用 action 属性来自定义它：

¥Sometimes we want a different behavior for in-page navigation, such as replace instead of navigate. We can use the action prop to customize it:

示例：

¥Example:

import { StackActions } from '@react-navigation/native';

// ...

function Home() {
  return (
    <LinkButton
      screen="Profile"
      params={{ id: 'jane' }}
      action={StackActions.replace('Profile', { id: 'jane' })}
    >
      Go to Jane's profile
    </LinkButton>
  );
}

如果指定了 action 属性，则可以省略 screen 和 params 属性。在这种情况下，我们建议也指定 href prop，以确保链接可访问。

¥The screen and params props can be omitted if the action prop is specified. In that case, we recommend specifying the href prop as well to ensure that the link is accessible.

href

href 用于 Web 上的锚标记的 href 属性，以使链接可访问。默认情况下，这是根据使用 screen 和 params 属性的 linking 选项 自动确定的。

¥The href is used for the href attribute of the anchor tag on the Web to make the links accessible. By default, this is automatically determined based on the linking options using the screen and params props.

如果你想要使用自定义 href，可以将其作为 href 属性传递：

¥If you want to use a custom href, you can pass it as the href prop:

function Home() {
  return (
    <LinkButton
      action={StackActions.replace('Profile', { id: 'jane' })}
      href="/users/jane"
    >
      Getting Started
    </LinkButton>
  );
}