Nativescript 导航逻辑

Question

请问一个关于 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 重复到每个文件夹中，我正在寻找一种方法来整理我的代码，您是否有建议或资源可以帮助我解决这个问题？

Answer 1

感谢 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"

对于您必须调用每个导航功能这一事实，我仍然不是 100% 大惊小怪，但它肯定比我以前的更好。

Nativescript 导航逻辑

Nativescript Navigation Logic

javascript

nativescript