useLinkProps

useLinkProps 钩子让我们构建自定义链接组件，它让我们使用路径而不是基于 linking 选项 的屏幕名称导航到屏幕。它采用一个路径并返回一个带有一些可以传递给组件的 props 的对象。

¥The useLinkProps hook let's build our custom link components which let us navigate to a screen using a path instead of a screen name based on the linking options. It takes a path and returns an object with some props that you can pass to a component.

示例：

¥Example:

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

// ...

const LinkButton = ({ to, action, children, ...rest }) => {
  const { onPress, ...props } = useLinkProps({ to, action });

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

  if (Platform.OS === 'web') {
    // It's important to use a `View` or `Text` on web instead of `TouchableX`
    // Otherwise React Native for Web omits the `onClick` prop that's passed
    // You'll also need to pass `onPress` as `onClick` to the `View`
    // You can add hover effects using `onMouseEnter` and `onMouseLeave`
    return (
      <View
        onClick={onPress}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        style={{ transitionDuration: '150ms', opacity: isHovered ? 0.5 : 1 }}
        {...props}
        {...rest}
      >
        <Text>{children}</Text>
      </View>
    );
  }

  return (
    <TouchableOpacity onPress={onPress} {...props} {...rest}>
      <Text>{children}</Text>
    </TouchableOpacity>
  );
};

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

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

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

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

useLinkProps 返回的 props 对象包含可访问链接组件所需的属性。当我们在 View、Text 等上使用这些属性时，链接组件会响应用户操作（例如 Ctrl+Click/⌘+Click）以在新选项卡中打开链接，同时在同一网页内保持常规点击。

¥The props object returned by useLinkProps contains the required props for accessible link components. When we use these props on View, Text etc., the link component responds to user actions such as Ctrl+Click/⌘+Click to open links in new tab while keeping regular clicks within the same web page.

在将 useLinkProps 与当前版本的 React Native for Web 一起使用时，需要注意一些重要事项：

¥There are couple of important things to note when using useLinkProps with current version of React Native for Web:

1. 你必须显式传递 onPress 作为 onClick 属性，否则页内导航将无法工作

   ¥You must explicitly pass onPress as the onClick prop, otherwise in-page navigation won't work

2. 你只能将 View 或 Text 与 useLinkProps 一起使用。TouchableX 组件不支持我们需要的正确 onClick 事件

   ¥You can only use View or Text with useLinkProps. The TouchableX components don't support a correct onClick event which we need

在 React Native for Web 的未来版本中，这些都不会成为问题，你将能够在 Web、iOS 和 Android 上使用相同的链接代码。但在那之前，你需要为 Web 和原生编写特定于平台的代码。

¥In a future version of React Native for Web, these won't be an issue and you'll be able to have the same code for links on Web, iOS and Android. But until then, you need to write platform specific code for Web and native.

选项

¥Options

to

你可以传递具有 screen 属性的对象：

¥You can pass an object with a screen property:

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

该对象的语法与 导航到嵌套导航器中的屏幕 相同。默认情况下，这使用 navigate 操作进行导航，除非你指定不同的操作。

¥The syntax of this object is the same as navigating to a screen in a nested navigators. This uses a navigate action for navigation by default, unless you specify a different action.

或者，你也可以将绝对路径传递到屏幕，例如 - /profile/jane。

¥Alternatively, you can also pass an absolute path to the screen, e.g. - /profile/jane.

这将用于 href 属性以及页内导航。

¥This will be used for the href prop as well as for in-page navigation.

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
      to={{ screen: 'Profile', params: { id: 'jane' }}}
      action={StackActions.replace('Profile', { id: 'jane' })}
    >
      Go to Jane's profile
    </LinkButton>
  );
}

如果未指定 action 属性，则将使用提供给 to 属性的路径并将其作为 navigate 操作进行调度。

¥If the action prop is not specified, the path provided to the to prop will be used and dispatched as a navigate action.