链接

一个用于显示可点击链接的 SwiftUI Link 组件。

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.0

Expo UI Link 与官方 SwiftUI Link API 保持一致。

安装

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

基本链接

BasicLinkExample.tsx

import { Host, Link } from '@expo/ui/swift-ui';

export default function BasicLinkExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Link label="访问 Expo" destination="https://expo.dev" />
    </Host>
  );
}

自定义标签内容

你可以将自定义组件作为 children 传入，以构建更复杂的链接标签内容。

CustomContentExample.tsx

import { Host, Link, VStack, Image, Text } from '@expo/ui/swift-ui';

export default function CustomContentExample() {
  return (
    <Host matchContents>
      <Link destination="https://expo.dev">
        <VStack spacing={4}>
          <Image systemName="link" />
          <Text>Expo</Text>
        </VStack>
      </Link>
    </Host>
  );
}

API

import { Link } from '@expo/ui/swift-ui';

Component

`Link`

Type: React.Element<LinkProps>

Displays a native link component.

Example

import { Link } from '@expo/ui/swift-ui';
import { foregroundStyle, font } from '@expo/ui/swift-ui/modifiers';

<Link
  label="Open"
  destination="https://expo.dev"
  modifiers={[
    foregroundStyle('red'),
    font({ size: 24, weight: 'bold' })
  ]}
/>

LinkProps

`children`

Optional • Literal type: union

Custom content for the link label. Use this for custom label views. Only nested elements are supported, not plain strings.

Acceptable values are: ReactElement<unknown, string | JSXElementConstructor<any>> | ReactElement[]

`destination`

Type: string

The URL for the link.

`label`

Optional • Type: string

The text label for the Link. Use this for simple text links.

Inherited props

CommonViewModifierProps