Tabs的具体使用方法，我这个报错The variable with @Link in component with @Preview may cause error in

这个说是组件问题，但是根本没法理解啊！

我报错的情况是：

[Compile Result] ArkTS:WARN File: D:/save/myclass/xulaoshi/temp/atomgit_jiarong/entry/src/main/ets/pages/Main.ets:25:3
[Compile Result]  The variable with @Link in component with @Preview may cause error in component preview mode
[Compile Result] ArkTS:WARN File: D:/save/myclass/xulaoshi/temp/atomgit_jiarong/entry/src/main/ets/view/HomeView.ets:10:3
[Compile Result]  The variable with @Link in component with @Preview may cause error in component preview mode
[Compile Result] ArkTS:WARN File: D:/save/myclass/xulaoshi/temp/atomgit_jiarong/entry/src/main/ets/view/HomeView.ets:11:3
[Compile Result]  The variable with @Link in component with @Preview may cause error in component preview mode
[Compile Result] ArkTS:WARN File: D:/save/myclass/xulaoshi/temp/atomgit_jiarong/entry/src/main/ets/view/HomeView.ets:12:3
[Compile Result]  The variable with @Link in component with @Preview may cause error in component preview mode
[Compile Result] ArkTS:WARN File: D:/save/myclass/xulaoshi/temp/atomgit_jiarong/entry/src/main/ets/view/AboutView.ets:7:9
[Compile Result]  The @Link property 'userInfo' cannot be an optional parameter.
[Compile Result] ArkTS:WARN File: D:/save/myclass/xulaoshi/temp/atomgit_jiarong/entry/src/main/ets/components/NavigationComponent.ets:6:3
[Compile Result]  The variable with @Consume in component with @Preview may cause error in component preview mode
[Compile Result] ArkTS:WARN File: D:/save/myclass/xulaoshi/temp/atomgit_jiarong/entry/src/main/ets/components/TitleComponent.ets:10:3
[Compile Result]  The variable with @Link in component with @Preview may cause error in component preview mode
[Compile Result] ArkTS:WARN File: D:/save/myclass/xulaoshi/temp/atomgit_jiarong/entry/src/main/ets/components/TitleComponent.ets:11:3
[Compile Result]  The variable with @Link in component with @Preview may cause error in component preview mode
[Compile Result] ArkTS:WARN File: D:/save/myclass/xulaoshi/temp/atomgit_jiarong/entry/src/main/ets/components/TitleComponent.ets:12:9
[Compile Result]  The @Link property 'userInfo' cannot be an optional parameter.
[Compile Result] ArkTS:WARN File: D:/save/myclass/xulaoshi/temp/atomgit_jiarong/entry/src/main/ets/components/TitleComponent.ets:12:3
[Compile Result]  The variable with @Link in component with @Preview may cause error in component preview mode
[Compile Result] ArkTS:WARN File: D:/save/myclass/xulaoshi/temp/atomgit_jiarong/entry/src/main/ets/components/CommunityComponent.ets:6:34
[Compile Result]  The @Link property 'userInfo' cannot be an optional parameter.
[Compile Result] ArkTS:WARN File: D:/save/myclass/xulaoshi/temp/atomgit_jiarong/entry/src/main/ets/components/CommunityComponent.ets:6:3
[Compile Result]  The variable with @Link in component with @Preview may cause error in component preview mode
[Compile Result] ArkTS:WARN File: D:/save/myclass/xulaoshi/temp/atomgit_jiarong/entry/src/main/ets/components/CommunityComponent.ets:7:3
[Compile Result]  The variable with @Link in component with @Preview may cause error in component preview mode
Preview check failed. View the check result.

无法显示效果：

Tabs的具体使用方法，我这个报错The variable with @Link in component with @Preview may cause error in -鸿蒙开发者社区

harmony

Tabs

小雨下雨的雨

2025-03-30 20:55:01

浏览

回答 1

已解决

回答 1

按赞同

按时间

红目香薰

我给你一个示例，这么用就没什么问题了：

  build() {
    // 使用 Stack 布局构建页面内容
    Stack() {
      // 使用 AtomicServiceTabs 组件创建底部导航栏和标签页内容
      AtomicServiceTabs({
        tabContents: [
          () => {
            this.tabContent1() // 第一个标签页内容：入账页面
          },
          () => {
            this.tabContent2() // 第二个标签页内容：出账页面
          },
          () => {
            this.tabContent3() // 第三个标签页内容：统计页面
          },
          () => {
            this.tabContent4() // 第四个标签页内容：个人中心页面
          }
        ],
        tabBarOptionsArray: this.listBar, // 设置底部导航栏选项数组
        tabBarPosition: TabBarPosition.BOTTOM, // 设置底部导航栏位置为底部
        barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'), // 设置底部导航栏背景颜色
        onTabBarClick: this.onTabClick, // 设置标签点击回调函数
        onContentWillChange: this.onContentWillChangeCallBack, // 设置内容将要改变的回调函数
      })
    }
    .height('100%') // 设置 Stack 布局的高度为 100%
  }

好用的话希望采纳。

2025-03-31 15:36:04

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

Tabs的具体使用方法，我这个报错The variable with @Link in component with @Preview may cause error in

订阅鸿蒙技术特刊，精选内容抢先看