useLinkTo
useLinkTo
フックを使うと、linking
オプションに基づいて画面名をベースにではなくパスを使用して画面にナビゲートできます。ナビゲートするパスを受け取る関数を返します。
import { useLinkTo } from '@react-navigation/native';
// ...
function Home() {
const linkTo = useLinkTo();
return (
<Button onPress={() => linkTo('/profile/jane')}>
Go to Jane's profile
</Button>
);
}
これは、さらに複雑な動作を構築するために使用される低レベルフックです。このフックを直接使用するのではなく、useLinkProps
フックを使用してカスタムリンクコンポーネントを作成することをお勧めします。これにより、コンポーネントがWebで適切にアクセスできるようになります。
クラスコンポーネントと一緒に使用する
クラスコンポーネントを関数コンポーネントでラップしてフックを使用できます
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} />;
}