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 to use 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.

与类组件一起使用

¥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} />;
}