如何更改 SearchBar 组件 Nativescript + Vue 中的图标颜色？

【问题标题】：How to change icon color in SearchBar component Nativescript + Vue?如何更改 SearchBar 组件 Nativescript + Vue 中的图标颜色？
【发布时间】：2023-01-04 01:51:58
【问题描述】：

(https://i.stack.imgur.com/f8DyP.jpg)

<SearchBar
    class="w-full rounded-full"
    textFieldHintColor="#fff"
    color="#fff"
    textProperty="#fff"
    backgroundImage="none"
    v-model="search"
    hint="Search..."
    @submit="fetchData"/>

该文档没有说明任何关于图标的信息

【问题讨论】：

标签： nativescript nativescript-vue

【解决方案1】：

目前没有任何 API 可以更改图标颜色，因为它是由 App_Resources 中的 styles.xml 设计的。

Android 使用SearchView，所以你可以像本地一样设置它的样式：https://stackoverflow.com/a/57735080

iOS 使用 UISearchBar，也可以原生设置样式：How to change the color of the UISearchBar Icon?

searchViewLoaded(event) {
  if(isAndroid) {
    const searchIcon event.object.android.findViewById(androidx.appcompat.R.id.search_mag_icon);
    searchIcon.setColorFilter(new Color('#ffffff').android, android.graphics.PorterDuff.Mode.SRC_IN);
  } else {
    // UISearchBar
    event.object.ios.searchTextField.leftView?.tintColor = new Color('#ffffff').ios;
  }

}

【讨论】：