首页 文章

Nativescript导航逻辑

提问于
浏览
1

在Javascript Nativescript应用程序中有一个关于导航逻辑的快速问题 .

许多应用程序似乎将导航绑定到视图js文件 . 我正在制作的应用程序在JS文件之间共享了很多这种导航,我正在寻找一种方法来减少我正在使用的可重复代码的数量 .

我知道Angular有路由器来处理这个问题,但我想知道我是否能用Javascript Nativescript做一些事情来将所有导航逻辑包含在一个文件中 .

目前我正在这样航行: -

XML:

<Label text=“Navigation Label" tap="navigate" />

JS:

var frameModule = require("ui/frame");
function navigationOptions(moduleVar) {
 frameModule.topmost().navigate({
   moduleName: moduleVar,
   transition: { name: "fade" },
   backstackVisible: false,
   clearHistory: true
 });
}

exports.navigate = function(args) {
 navigationOptions("views/catalog/catalog");
}

此时必须在每个文件夹中重复JS,我只是想找到一种方法来整理我的代码,你是否有我可以找到的建议或资源来帮助解决这个问题?

1 回答

  • 2

    由于Nikolay提供的资源并由TJ创建,我找到了解决方案:https://github.com/NativeScript/sample-Groceries/blob/javascript/app/shared/navigation.js

    首先在共享文件夹中创建一个navigation.js文件:

    app/shared/navigation.js

    var frameModule = require("ui/frame");
    var drawer;
    module.exports = {
      /* Settings navigation */
      goToSettingsPage: function() {
        frameModule.topmost().navigate({
          moduleName: "views/settings/settings",
          transition: { name: "fade" },    // <-- This line
          backstackVisible: false,
        });
      },
    

    然后,您需要在视图js文件中调用js文件:

    app/views/dashboard.js

    var navigation = require("../../shared/navigation");
    

    您还需要调用navigation.js中设置的功能

    exports.goToSettingsPage = navigation.goToSettingsPage;
    

    然后,您只需在所需组件上调用该函数即可 .

    tap="goToSettingsPage"
    

    我仍然不是因为你必须打电话给每个导航功能这一事实,但它肯定比我以前更好 .

相关问题