Version: 7.x

useLinkTo

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

¥The useLinkTo hook lets us navigate to a screen using a path instead of a screen name based on the linking options. It returns a function that receives the path to navigate to.

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

// ...

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

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

这是一个底层钩子，用于在顶部构建更复杂的行为。我们建议使用 useLinkProps 钩来构建自定义链接组件，而不是直接使用此钩子。它将确保你的组件可以在网络上正确访问。

¥This is a low-level hook used to build more complex behavior on top. We recommended using the useLinkProps hook to build your custom link components instead of using this hook directly. It will ensure that your component is properly accessible on the web.

警告

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

¥Navigating via href strings is not type-safe. If you want to navigate to a screen with type-safety, it's recommended to use screen names directly.

与类组件一起使用

¥Using with class component

你可以将类组件封装在函数组件中以使用钩子：

¥You can wrap your class component in a function component to use the 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} />;
}

与类组件一起使用​

与类组件一起使用