useLinkProps

useLinkProps 钩子允许我们构建自定义链接组件，这些组件让我们可以使用路径而不是基于 linking 选项 的屏幕名称来导航到屏幕。它接受一个路径并返回一个包含一些属性的对象，你可以将这些属性传递给组件。

示例

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 组件

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

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

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

1. 您必须显式地将onPress作为onClick属性传递，否则页面内导航将无法正常工作。
2. 您只能将View或Text与useLinkProps一起使用。TouchableX组件不支持我们需要的正确onClick事件。

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

选项

to

您可以传递一个包含screen属性的对象。

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

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

或者，您也可以传递一个指向屏幕的绝对路径，例如 - /profile/jane。

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

action

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

示例

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操作分派。