useLinkTo

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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

// ...

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

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

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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

Комментарии