Click which binds to Text doesn't work on NativeView

How-to Discussions
1 
<Page ux:Class="Location" Visibility="Visible">
  <JavaScript File="./Location.js"/>
  <Router ux:Dependency="router"/>
  <NativeViewHost>
    <DockPanel>
      <Panel Height="50" Color="#53c296" Dock="Top" Width="100%" Padding="10,0">
        <Panel Alignment="CenterLeft" Color="#ff0" ux:Name="RegionBack" Opacity="1" Clicked="{goToSearch}" HitTestMode="LocalBoundsAndChildren">
          <BText Width="50" Height="50" Value="Back" Color="#fff" FontSize="15"/>
        </Panel>
        <Panel Width="50" Height="50" Color="#f0f" Alignment="CenterRight" ux:Name="SearchButton" Opacity="1"
           HitTestMode="LocalBounds" Clicked="{goToMain}">
          <BText HitTestMode="LocalVisual" Width="50" Height="50" TextAlignment="Right" Value="Select" Color="#fff" FontSize="15"/>
        </Panel>
        <Panel Alignment="Center" Height="50">
          <BText Width="100" Height="50" Value="Map" TextAlignment="Center" Color="#fff" FontSize="19" HitTestMode="LocalVisual" />
        </Panel>
      </Panel>
      <MapView ux:Name="MainMap" Zoom="15" ShowMyLocationButton="true"
          Latitude="{poslatitude}" Longitude="{poslongitude}" LocationLongPressed="{onMapTouched}" >
        <Each Items="{pivotMarker}">
          <MapMarker Latitude="{latitude}" Longitude="{longitude}" Label="{label}" IconFile="../Assets/Images/marker_green.png">
          </MapMarker>
        </Each>
      </MapView>
      <Panel Dock="Bottom" Color="#fff" Width="100%">
        <RText Value="Long press to change marker position" TextAlignment="Center" FontSize="13" Color="#747474"/>
      </Panel>
    </DockPanel>
  </NativeViewHost>
  <Transition To="Main">
    <Change this.Opacity="0" Duration="0.2"/>
  </Transition>

  <WhileActive>
    <OnBackButton>
      <Callback Handler="{onBackbutton}"/>
    </OnBackButton>
  </WhileActive>
</Page>

function goToSearch(){
    router.push('SearchLocation',pivotMarker.getAt(0));
}
function goToMain(){
    console.log('!!!!!!!')
    router.goto('Main', {'latitude':pivotMarker.getAt(0).latitude,
                         'longitude':pivotMarker.getAt(0).longitude});
}
module.exports = {
 goToMain, goToSearch,
}

On line 7 and on line 10 Clicked handlers work well on Android, but not on iOS.

I have tried to change Text to Image that indicates each means, then works well but usually not appears because of NativeViewHost I think.

So there are two way.

  1. Fix the Clicked Handler.

  2. Fix the Problem that images occasionally fail in ‘NativeViewHost’

Please let me know how to solve these problem or these are bugs or somethings.

2

Try setting HitTestMode="None" on the child Text elements and HitTestMode="LocalBounds" on the enclosing parents (that have the Clicked triggers on them), that should help work around the issue.

3

@Uldis

It works for me!
Thank you for your help!