CODEWITHSUNDEEP
javascriptxmlnativescriptcode-behindtns
Brotholomew
Brotholomew

Reputation: 43

How to correctly create the 'tap' button event handler in a Nativescript with JS app

I am learning nativescript with JS and I am facing problems with fundamental things. I want to navigate to another page (via a tap button event handler) and I don't know why it will not work when the pages are in a certain folder (and why the method from the book does not work x.x).

I've tried the exact steps from the nativescript book (https://www.nativescript.org/get-the-nativescript-book), meaning:

var frameModule = require("ui/frame");
function onTap()
{
   frameModule.topmost().navigate("pages/second-page/item-page "); 
}

exports.onTap = onTap;

but this did not work completely. I've also tried to implement the method from this demo https://play.nativescript.org/?template=play-js&id=YwE1kV&_ga=2.244066690.664730264.1558375788-1200954945.1554045393 This method works, however the pages needed to be in the same folder (and I want them to be in separate folders though).

When I divided them into folder1, folder2, I've noticed that these folders (folder1 and folder2) must be placed in a comon subfolder (because if they're in the 'app' folder this does not work). How can I understand this?

This is how it looks now (there is a subfolder 'pages' located in the 'app' folder. Within the 'pages' folder there are 'main-page' (with main-page.xml and main-page.js) and 'second-page' (with item-page.js and item-page.xml) folders.

This is my main-page (the starting app page)

XML:
<Page class="page">
    <StackLayout>
        <Label text="Tap the button"/>
        <Button id="button" text="Tap me!" tap="onTap"></Button>
        <Label text="this_sucks" textWrap="true"/>
    </StackLayout>
</Page>

JS:
function onTap(args) {
    const button = args.object;
    const page = button.page;
    page.frame.navigate("pages/second-page/item-page");
}

exports.onTap = onTap;

When the 'main-page' and 'second-page' folders were directly in the 'app' folder, I couldn't get it to work... (page.frame.navigate("../second-page/item-page"). I also don't understand why the method from the book did not work

var frameModule = require("ui/frame");
function onTap()
{
   frameModule.topmost().navigate("pages/second-page/item-page"); 
}

exports.onTap = onTap;

Could you please try to explain this behaviour?

Upvotes: 0

Views: 1383

Answers (1)

Nathanael
Nathanael

Reputation: 5399

I actually suspect this issue is caused by HMR, (HMR is the new Hot Module Reloading system) this is supposed to be out of Beta and release quality in 5.3 and 5.4 of NativeScript. However, with straight JS applications, it seems to be extremely buggy still.

I recently ran into the exact same issue as you and it was not my code that didn't work it was that HMR messed all the code up.

The solution is to switch the app to use the "Legacy" workflow system for building the application.

In your main folder for your app you should find a file called nsconfig.json open this file up and change the "useLegacyWorkflow": false to "useLegacyWorkflow": true then you must reset the platforms folder via a :

  • tns platform clean android (Assuming you are using Android)
  • tns platform clean ios (Assuming you are using ios)

And then you should just run tns run android and/or tns run ios -- DO NOT USE the --hmr or --bundle flags; as this will again attempt to use the HMR system which is the problem...

Please note for future readers, this fix is only for 5.3+, and probably will not work in 6.0; which should iron out these JavaScript HMR issues.

Upvotes: 0

Related Questions