Nativescript-vue-为iOS本机搜索栏API实现委托

时间:2019-10-06 09:11:13

标签: nativescript-vue

我正在使用打字稿学习nativescript-vue。我已经在iOS中实现了本机搜索栏。我试图弄清楚如何设置委托(根据UISearchBarDelegate文档)。出现搜索栏,但是当尝试设置代理时,出现以下错误:

(CoreFoundation)由于未捕获的异常而终止应用程序'NativeScript遇到致命错误:TypeError:尝试分配给只读属性。

我一直在参考这份文档:https://docs.nativescript.org/core-concepts/ios-runtime/how-to/ObjC-Subclassing

有什么想法或其他资源可以帮助解决这个问题?

/// App.vue:

<template>
    <Page @loaded="onPageLoaded">
        <ActionBar title="Welcome to NativeScript-Vue!"/>
        <GridLayout columns="*" rows="*">
            <Label class="message" :text="msg" col="0" row="0"/>
        </GridLayout>
    </Page>
</template>

<script lang="ts">
import { isIOS } from 'tns-core-modules/platform'
import { Page } from 'tns-core-modules/ui/page'
import { EventData } from 'tns-core-modules/data/observable'

  export default {
    data() {
      return {
        msg: 'Hello World!'
      }
    },
    methods: {
      onPageLoaded(args: EventData) {
        const page = args.object as Page
        if (isIOS) {
          const navController = page.frame.ios.controller as UINavigationController
          const searchController = UISearchController.new()
          const topController = navController.topViewController
          topController.navigationItem.searchController = searchController

          let searchBarDelegate: SearchBarDelegateImpl = SearchBarDelegateImpl.new()
          searchController.searchBar.delegate = searchBarDelegate
        }
      }
    }
  }

class SearchBarDelegateImpl extends NSObject implements UISearchBarDelegate {
  static ObjCProtocols =  [UISearchBarDelegate]

  static new(): SearchBarDelegateImpl {
    return <SearchBarDelegateImpl>super.new()
  }

  searchBarTextDidBeginEditing(searchBar: UISearchBar) {
    console.log("searchBarTextDidBeginEditing")
  }
}

</script>

<style scoped>
    ActionBar {
        background-color: #53ba82;
        color: #ffffff;
    }

    .message {
        vertical-align: center;
        text-align: center;
        font-size: 20;
        color: #333333;
    }
</style>

0 个答案:

没有答案