Page Reference Issues, JSON Third-party Libraries, Routing Table Usage, Pull-to-Refresh Problems, Video Playback Errors

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Page Reference Issues, JSON Third-party Libraries, Routing Table Usage, Pull-to-Refresh Problems, Video Playback Errors

1. Issue: Full-screen custom component referenced by another page disables button functions on the other page

Reference code:

//1.index.ets
@Entry
@Component
struct First {
  @State visible: Visibility = Visibility.None

  build() {
    // Using Stack to implement a pseudo-Dialog overlay on the original page
    Stack() {
      Column() {
        Button('Page bottom button')
          .onClick(() => {
            // showToast('Clicked bottom button')
            console.log('Clicked bottom button', this.visible)
          })
          .backgroundColor(Color.Blue)
          .margin({ top: 200 })

      }.width('100%')
      .height('100%')
      .backgroundColor(Color.Red)

      Component1({ visible: $visible })

    }.width('100%')
    .height('100%')

  }
}
//2.Component1.ets
@Component
export struct Component1 {
  @Link visible: Visibility
  @State btnvisible: Visibility = Visibility.Visible
  build() {
    Stack() {
      Row() {
        // Initial page
        Column() {
          // Dialog trigger point
          Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.End }) {
            Button('click')
              .type(ButtonType.Normal)
              .onClick(() => {
                // Test if click event is transmitted to the original page (no transmission detected, conforms to Dialog specifications)
                console.log("hit me!")
                if (this.visible == Visibility.Visible) {
                  this.visible = Visibility.None
                  this.btnvisible = Visibility.Visible
                } else {
                  this.visible = Visibility.Visible
                  this.btnvisible = Visibility.None
                }
              })
              .fontColor(Color.White)
              .width(80)
              .height(80)
          }

        }
        .backgroundColor(Color.Green)
        .alignItems(HorizontalAlign.End)
        .width(80)
        .visibility(this.btnvisible)
      }
      .backgroundColor(Color.Yellow)
      // Start of pop-up effect construction (main modifications needed): Add a semi-transparent gray overlay
      Column() {
        Text('I am the pop-up content page').fontColor(Color.Green)
      }
      .width('100%')
      .height('100%')
      .onClick(() => {
        if (this.visible == Visibility.Visible) {
          this.visible = Visibility.None
          this.btnvisible = Visibility.Visible
        } else {
          this.visible = Visibility.Visible
          this.btnvisible = Visibility.None
        }
      })
      // Adjust opacity as needed
      .opacity(0.7)
      .backgroundColor(Color.Orange)
      .visibility(this.visible)
    }
  }
}

2. How to parse JSON content in HarmonyOS? Are there more JSON libraries?

Does it have a built-in JSON library? Only saw JSON.parse and JSON.stringify, but how to read properties from a JSON object?

For JSON parsing and generation API methods, refer to:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-json-V5

Third-party JSON library link:

https://gitee.com/openharmony-sig/tpc_c_cplusplus/tree/master/thirdparty/rapidjson

3. How to mix system routing tables and custom routing in HarmonyOS? Can you provide a demo?

There is currently no demo for mixing custom routing tables and system routing tables; specific usage refers to:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-set-navigation-routing-V5

Refer to the Navigation system routing in the sample code link:

https://developer.huawei.com/consumer/cn/samples/

4. Issue: The loading icon remains visible after pull-to-refresh in HarmonyOS

Reasons why the loading icon remains visible after refreshing:

There is white space at the top of the Refresh component (the empty row from the avatar component), allowing the loading icon to be displayed.
Problem with assigning this.RefreshText:

.onRefreshing(async () => {
  await this.onInitialize
  this.isRefreshing = false
  this.RefreshText = ''
  console.log('onRefreshing test')
})

Here, assigning this.RefreshText to '' fails.

.onRefreshing(() => {
  setTimeout(() => {
    this.isRefreshing = false
    this.RefreshText = ''
  }, 2000)
  console.log('onRefreshing test')
})

Here, assigning this.RefreshText to '' works. After the data request, this.RefreshText is successfully assigned (not 'Loading...'), and the loading icon hides automatically.

5. Issue: HarmonyOS video playback occasionally returns error code 5400106

5400106: Unsupported format

Error message: Unsupport format.

Error description: Unsupported specification.

Possible cause: Unsupported file or format.

Troubleshooting steps: The currently used format specification is unsupported. Switch to a supported specification. This error indicates a problem with the file format; check the video URI.

DEV Community