动作栏上的nativescript搜索栏没有隐藏

我正在尝试在其中实现一个带有搜索栏的操作栏以及一个显示/隐藏搜索栏的按钮 . 在开始时，必须隐藏搜索栏 . 只有必须显示动作栏的 Headers 和显示搜索栏的动作项 . 在视图中按预期工作，但是当我转到另一个视图然后返回到此视图时出现问题 . 搜索栏未隐藏，但按钮也不隐藏 . 我正在使用带有布尔值的observable来控制项目 . 当点击搜索搜索栏时显示，当我捕捉到清除事件时，我将搜索栏设置为隐藏 .

最后，我还面临着当我回到这个视图时，clearEvent事件被调用了两三次 . 我不明白为什么会这样做 . 到目前为止，我在Android上尝试过 .

当我启动应用程序时，操作栏看起来像第一个图像 . 如果我点击搜索图标，操作栏就像第二个那样当我转到另一个视图并返回时就像第三个：

Edit ，我已经更改了所需的代码，但它还没有工作 . 这是一个完整的视图和js文件来重现问题：

XML：

<dpg:DrawerPage navigatedTo="onNavigatedTo"  navigatingTo="navigatingTo"
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
  xmlns:drawer="nativescript-telerik-ui/sidedrawer"
  xmlns:component="customcomponents/menu"
  xmlns:lv="nativescript-telerik-ui/listview"
 loaded="loaded"
>


    <ActionBar class="actionB" title="stores" >
        <android>
            <NavigationButton icon="res://ic_menu_black_24dp" tap="showSlideout" />
        </android>
        <ios>
            <ActionItem icon="res://ic_menu" ios.position="left" tap="showSlideout" />
        </ios>

        <ActionItem>
            <ActionItem.actionView>
                     <SearchBar id="search" class="blank" backgroundColor="#3C5AFD" hint="Search..." visibility="{{ myShowSearchBar ? 'visible' : 'collapsed' }}" />
            </ActionItem.actionView>
        </ActionItem>

        <ActionItem tap="onSearch"
            ios.systemIcon="12" ios.position="right"
            android.systemIcon="ic_menu_search" android.position="actionBar" visibility="{{ myShowSearchBar ? 'collapsed' : 'visible' }}"/>

    </ActionBar>

    <dpg:DrawerPage.sideDrawer>
    <drawer:RadSideDrawer id="drawer" drawerSize="270">
            <drawer:RadSideDrawer.drawerContent>
                <component:menu />
            </drawer:RadSideDrawer.drawerContent>
        </drawer:RadSideDrawer> 
</dpg:DrawerPage.sideDrawer>

</dpg:DrawerPage>

js文件：

var frameModule = require("ui/frame");
var observable = require("data/observable");
var searchBarModule = require("ui/search-bar");
var topmost; 
var drawer;
var page;
var observableView = new observable.Observable({myShowSearchBar: false});



exports.loaded = function(args) {

  page = args.object;
  topmost = frameModule.topmost();

  observableView.set("myShowSearchBar", false);
  page.bindingContext = observableView;


  drawer = page.getViewById("drawer");
  var searchBarView = page.getViewById('search');


  if (searchBarView.android) {
     searchBarView.android.clearFocus();
  }


  searchBarView.on(searchBarModule.SearchBar.submitEvent, function (args) { 
      console.log("Search for " + (args.object).text);
      observableView.set("myShowSearchBar", false);
   });

   searchBarView.on(searchBarModule.SearchBar.clearEvent, function (args) {
       observableView.set("myShowSearchBar", false);
   });
 };


exports.showSlideout = function(){
  drawer.toggleDrawerState();
}


exports.onSearch = function(args){
  console.log("onSearch");
  observableView.set("myShowSearchBar", true);
}