AI logo
AI
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

GlobalProps

lynx.__globalProps 是一个全局变量，它是一个对象，你可以在任何地方访问它。

  • 它在前端代码中是只读的，你不能修改它的值。
  • 客户端可以通过调用 lynx SDK 提供的相关 API 设置和更新它的值。
  • 客户端每次执行更新，都会触发 onGlobalPropsChanged 事件，随后触发整个页面的一次重新渲染。

用法

// `lynx.__globalProps` 中的属性不由 Lynx 管理，因此你必须自行扩展这个接口。
declare module '@lynx-js/types' {
  interface GlobalProps {
    appTheme: string;
    title: string;
  }
}

function App() {
  const themeClass = useMemo(
    () => `theme-${lynx.__globalProps.appTheme}`,
    [lynx.__globalProps.appTheme],
  );

  return (
    <view class={themeClass}>
      <text>{lynx.__globalProps.title}</text>
    </view>
  );
}

事件监听

你可以在你的组件中监听 __globalProps 的变化。

import { useLynxGlobalEventListener } from '@lynx-js/react';

export function App() {
  useLynxGlobalEventListener('onGlobalPropsChanged', () => {
    console.log('onGlobalPropsChanged', lynx.__globalProps);
  });

  return <view />;
}

客户端接入

在 LynxView 提供了接口设置 __globalProps。

Android

void updateGlobalProps(@NonNull Map<String, Object> props)

void updateGlobalProps(@NonNull TemplateData props)

iOS

- (void)updateGlobalPropsWithDictionary:(NSDictionary<NSString*, id>*)data

- (void)updateGlobalPropsWithTemplateData:(LynxTemplateData*)data

兼容性

Missing API Query

Either a query must be provided as the `query` prop to the <APITable />, or it will be retrieved from the api field in the frontmatter of the current page.

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。