• 简体中文

      • 安装

      1. 安装依赖包

      npm
      yarn
      pnpm
      bun
      deno
      npm install @use-voltra/lynx @use-voltra/core @use-voltra/ios @use-voltra/android @use-voltra/server @lynx-js/react

      2. 配置 Rspeedy

      固定开发服务器端口,这样宿主 app 每次都能找到你的 bundle:

      lynx.config.ts
      import { defineConfig } from '@lynx-js/rspeedy'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'

export default defineConfig({
  plugins: [pluginReactLynx()],
  server: { port: 3000, strictPort: true },
})

      3. 配置原生宿主

      实时活动和小组件运行在原生 OS 扩展里,所以你需要一个嵌入 Lynx 并注册了 Voltra 原生模块的 iOS 或 Android 宿主 app。按对应平台指南操作:

      4. 写第一个实时活动

      import { useLiveActivity } from '@use-voltra/lynx/ios-client'
import { Voltra } from '@use-voltra/ios'

useLiveActivity(
  {
    lockScreen: (
      <Voltra.VStack style={{ padding: 16, borderRadius: '14px', backgroundColor: '#111827' }}>
        <Voltra.Text style={{ color: 'white', fontSize: 18 }}>Hello from Lynx</Voltra.Text>
      </Voltra.VStack>
    ),
  },
  { activityName: 'demo', autoStart: true }
)

      Voltra 的组件参考(每个 Voltra.* 组件、样式、属性、事件)都在 Voltra 官方文档 里。Lynx 上的 API 与原版 一致,只是有几条 CSS 约定不太一样,详见 iOS 样式说明。

      Need React or React Native expertise you can count on?

      Let's talk