バージョン: 6.x

useLinkProps

useLinkPropsフックを使用すると、linkingオプションに基づいて、画面名ではなくパスを使用して画面に移動できるカスタムリンクコンポーネントを構築できます。パスを受け取り、コンポーネントに渡すことができるいくつかのプロパティを持つオブジェクトを返します。

例

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

// ...

const LinkButton = ({ to, action, children, ...rest }) => {
  const { onPress, ...props } = useLinkProps({ to, action });

  const [isHovered, setIsHovered] = React.useState(false);

  if (Platform.OS === 'web') {
    // It's important to use a `View` or `Text` on web instead of `TouchableX`
    // Otherwise React Native for Web omits the `onClick` prop that's passed
    // You'll also need to pass `onPress` as `onClick` to the `View`
    // You can add hover effects using `onMouseEnter` and `onMouseLeave`
    return (
      <View
        onClick={onPress}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        style={{ transitionDuration: '150ms', opacity: isHovered ? 0.5 : 1 }}
        {...props}
        {...rest}
      >
        <Text>{children}</Text>
      </View>
    );
  }

  return (
    <TouchableOpacity onPress={onPress} {...props} {...rest}>
      <Text>{children}</Text>
    </TouchableOpacity>
  );
};

function Home() {
  return (
    <LinkButton to={{ screen: 'Profile', params: { id: 'jane' } }}>
      Go to Jane's profile
    </LinkButton>
  );
}

その後、アプリの他の場所でLinkButtonコンポーネントを使用できます

function Home() {
  return (
    <LinkButton to={{ screen: 'Profile', params: { id: 'jane' } }}>
      Go to Jane's profile
    </LinkButton>
  );
}

useLinkPropsによって返されるpropsオブジェクトには、アクセス可能なリンクコンポーネントに必要なプロパティが含まれています。これらのプロパティをView、Textなどで使用すると、リンクコンポーネントは、通常のクリックを同じWebページ内に維持しながら、新しいタブでリンクを開くためのCtrl +クリック/⌘+クリックなどのユーザーアクションに応答します。

現在のバージョンのReact Native for WebでuseLinkPropsを使用する場合、注意すべき重要な点がいくつかあります

onClickプロパティとしてonPressを明示的に渡す必要があります。そうしないと、ページ内ナビゲーションが機能しません
useLinkPropsでは、ViewまたはTextのみを使用できます。 TouchableXコンポーネントは、必要な正しいonClickイベントをサポートしていません

React Native for Webの将来のバージョンでは、これらは問題ではなくなり、Web、iOS、Androidでリンクに同じコードを使用できるようになります。ただし、それまでは、Webとネイティブ用にプラットフォーム固有のコードを作成する必要があります。

オプション

`to`

screenプロパティを持つオブジェクトを渡すことができます

function Home() {
  return (
    <LinkButton to={{ screen: 'Profile', params: { id: 'jane' } }}>
      Go to Jane's profile
    </LinkButton>
  );
}

このオブジェクトの構文は、ネストされたナビゲーターの画面への移動と同じです。別のアクションを指定しない限り、デフォルトではナビゲーションにnavigateアクションを使用します。

または、画面への絶対パス（例：/profile/jane）を渡すこともできます。

これは、hrefプロパティとページ内ナビゲーションに使用されます。

`action`

navigateの代わりにreplaceなど、ページ内ナビゲーションの動作を変更したい場合があります。 actionプロパティを使用してカスタマイズできます

例

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

// ...

function Home() {
  return (
    <LinkButton
      to={{ screen: 'Profile', params: { id: 'jane' } }}
      action={StackActions.replace('Profile', { id: 'jane' })}
    >
      Go to Jane's profile
    </LinkButton>
  );
}

actionプロパティが指定されていない場合、toプロパティに提供されたパスが使用され、navigateアクションとしてディスパッチされます。

オプション​

to​

action​

オプション

`to`

`action`