useLinkTo

useLinkTo Hook 允许我们使用路径而不是基于 linking 选项的屏幕名称来导航到屏幕。它返回一个接收要导航到的路径的函数。

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

// ...

function Home() {
  const linkTo = useLinkTo();

  return (
    <Button onPress={() => linkTo('/profile/jane')}>
      Go to Jane's profile
    </Button>
  );
}

这是一个底层 Hook，用于在其之上构建更复杂的行为。我们建议使用 useLinkProps Hook 来构建您的自定义链接组件，而不是直接使用此 Hook。它将确保您的组件在 Web 上可正确访问。

警告

通过 href 字符串导航不是类型安全的。如果您想通过类型安全的方式导航到屏幕，建议直接使用屏幕名称。

与类组件一起使用

您可以将您的类组件包装在一个函数组件中以使用 Hook

class Home extends React.Component {
  render() {
    // Get it from props
    const { linkTo } = this.props;
  }
}

// Wrap and export
export default function (props) {
  const linkTo = useLinkTo();

  return <Profile {...props} linkTo={linkTo} />;
}