Navigating to detail page: Image shows in iOS but not in Android


#1

Works as expected in IOS simulator but not Android emulator. Any ideas?

Thanks in advance…

package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.Basic",
    "tns-android": {
      "version": "3.0.0"
    },
    "tns-ios": {
      "version": "3.1.0"
    }
  },
  "dependencies": {
    "nativescript-theme-core": "~1.0.2",
    "tns-core-modules": "3.0.0"
  },
  "devDependencies": {
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "lazy": "1.0.11",
    "nativescript-dev-android-snapshot": "^0.*.*"
  }
}

main-page.js

var frameModule = require("ui/frame");
var observable = require("data/observable");

// NOTE: Single items here not using - new observable.fromObject(objectName);
var viewModel = new observable.Observable();
    viewModel.set("items1", "~/img/thb_GroceryShop.jpg");
    viewModel.set("items2", "~/img/Thb_AmFlagMap.png");
    viewModel.set("items3", "~/img/Thb_AmFlagMap.png");
    viewModel.set("items4", "~/img/Thb_AmFlagMap.png");
    viewModel.set("items5", "~/img/Thb_AmFlagMap.png");

var counter = 0;
var lblCounter;
exports.tapAction = function() {
    counter++;
    lblCounter.text = "You tapped " + counter + " times!";
}

//Tap event tapAction1 = nav to detail page
exports.tapAction1 = function() {
    var myPath = "~/img/wine1.jpg"
    var navigationEntry = {
    moduleName: "detail-page",
    context: {myPath},
    //animated: true
    };
    frameModule.topmost().navigate(navigationEntry);
}

exports.onNavigatingTo = function(args) {
    var page = args.object;
	// HIDE action bar
	//page.actionBarHidden = true;
    page.bindingContext = viewModel;
    lblCounter = page.getViewById("lblCounter");
}

detail-page.xml

<Page navigatingTo="onNavigatingTo">
    <ActionBar title="My Basic App">
        <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" tap="onNavBtnTap"/>
    </ActionBar>    
    <Image src="{{ myPath }}"/>
</Page>

detail-page.js

var frameModule = require("ui/frame");
var topFrame = frameModule.topmost();

exports.onNavigatingTo = function(args) {
    var page = args.object;
    page.bindingContext = page.navigationContext;
}

/* In iOS simulator: It works with or without following commented out code
var myPic;
var observableModule = require("data/observable");
var viewModel = new observableModule.Observable();
    viewModel.set("myPath", myPic);

exports.onNavigatingTo = function(args) {
    var page = args.object;
    myPic = page.navigationContext;
    page.bindingContext = viewModel;
}
*/

exports.onNavBtnTap = function() {
    // This code will be called only in Android.
	topFrame.goBack();
    // console.log("Navigation button tapped!");
}