NativeScript-Vue 中文网

Appearance

Manual Routing ​

在NativeScript-Vue中实现路由的最简单方法是使用以下任何便利函数：

对于更复杂的导航场景，您可以使用多个<Frame>组件和导航专用组件：

基本导航概念 ​

NativeScript所依赖的导航元素包括Frame和Page.

  • Frame它是主要的导航元素，根据应用程序的设计，它可以有一个或N个。在声明之前声明此元素很重要Page.
  • Page。这些是Frame将在两者之间导航。

浏览的基本应用程序结构如下。

vue
// App.vue
<script lang="ts" setup>
import Detail from "./Detail.vue"
</script>

<template>
  <Frame>
    <Page>
        <StackLayout>
            <Button text="Navigate to Detail Page" @tap="$navigateTo(Detail)" />
        </StackLayout>
    </Page>
  </Frame>
</template>

请注意，在App.vue组件中Frame被声明，里面有一个Page。当用户按下按钮时，他们将导航到Detail组件。

vue
// Detail.vue
<template>
  <Page>
      <StackLayout>
          <Label text="Navigation to Detail component completed" />
      </StackLayout>
  </Page>
</template>

如您所见，细节组件没有Frame元素，但它确实有Page组件，这是因为NativeScript将使用FrameApp.vue中声明的元素，用于导航到Detail组件页面。

这只是理解NativeScript中导航如何工作的一个基本但有用的示例。

查看导航 ​

使用$navigateTo在视图或方法中。

在视图中 ​

在theMaster组件，使用adata财产暴露Detail组件。援引$navigateTo(<propertyName>)直接在视图中。

vue
// Master.vue
<script lang="ts" setup>
import Detail from "./Detail.vue"
</script>

<template>
  <Frame>
    <Page>
        <ActionBar title="Master" />
        <StackLayout>
            <Button text="To Detail directly" @tap="$navigateTo(Detail)" />
        </StackLayout>
    </Page>
  </Frame>
</template>

在一种方法中 ​

将按钮绑定到方法并使用$navigateTo(Detail)导航到Detail组件。

vue
// Master.vue
<script lang="ts" setup>
import { $navigateTo } from "nativescript-vue"
import Detail from "./Detail.vue"

function goToDetailPage(){
  $navigateTo(Detail);
}
</script>

<template>
  <Frame>
    <Page>
        <ActionBar title="Master" />
        <StackLayout>
            <Button text="To Detail directly" @tap="goToDetailPage" />
        </StackLayout>
    </Page>
  </Frame>
</template>

将道具传递给目标组件 ​

通过aprops实例化目标组件时使用的对象。

JavaScript
$navigateTo(Detail, {
  props: {
    foo: 'bar',
  }
});

听从目标组件发射 ​

传递前缀为的侦听器属性on听你的emit目标事件。

JavaScript
// Master.vue
$navigateTo(Detail, {
  props: {
    onChange(data){
      // logic here
    },
  }
});
vue
// Detail.vue
<script lang="ts" setup>
const emit = defineEmits(["change"])

function goToDetailPage(){
  emit("change", { foo: "bar" })
}
</script>

有关可以传递的选项的更多信息，请参阅NavigationEntry.

指定转换 ​

您可以使用任何内置的过渡：

  • curl（与curlUp相同）（仅限iOS）
  • curlUp（仅限iOS）
  • curlDown（仅限iOS）
  • 爆炸（仅限安卓棒棒糖（21）及以上版本）
  • 褪色
  • flip（与flip-Right相同）
  • flip-right
  • 翻转左
  • slide（与slideLeft相同）
  • slide左
  • slideRight
  • slideTop
  • slide底部

例如：

JavaScript
$navigateTo(Detail, {
  transition: {
    name: "slideLeft",
    duration: 300,
    curve: "easeIn"
  },
  transitioniOS: {},
  transitionAndroid: {},
});

在框架内导航 ​

每个<Frame>元素有自己的导航堆栈。如果您正在使用多帧，您可能希望指定导航将在哪个框架中发生。例如，在侧栏中有一个按钮，可以更改主区域中的页面。您可以通过添加frame选项：

JavaScript
$navigateTo(SomeComp, {
  frame: '<id, or ref, or instance>'
});

的价值frame选项可以是以下选项之一：

  • 这个id的<Frame>组件（例如：<Frame id="main-frame">)
  • 这个ref对于<Frame>（例如：<Frame ref="mainFrame">)
  • 这个<Frame>实例本身

在theDetail组件，添加一个触发全局公开的按钮$navigateBack功能。

vue
//Detail.vue
<template>
    <Page>
        <ActionBar title="Detail" />
        <StackLayout>
          <Button text="Back to Master" @tap="$navigateBack" />
        </StackLayout>
    </Page>
</template>

模态视图导航 ​

使用$showModal显示Detail页面模式。此函数的行为类似于$navigateTo.

要关闭模式，请调用$modal.close.

vue
//Master.vue
<script lang="ts" setup>
import { $showModal } from "nativescript-vue"
import Detail from "./Detail.vue"

function showDetailPageModally(){
  $showModal(Detail);
}
</script>

<template>
  <Frame>
    <Page>
        <ActionBar title="Master" />
        <StackLayout>
            <Button text="Show Detail modally" @tap="showDetailPageModally" />
        </StackLayout>
    </Page>
  </Frame>
</template>
vue
// Detail.vue
<template>
  <Frame>
    <Page>
        <ActionBar title="Detail" />
        <StackLayout>
            <Button @tap="$modal.close" text="Close" />
        </StackLayout>
    </Page>
  </Frame>
</template>

注意：我们已将“详细信息”页面包裹在<Frame>元素，它允许我们展示<ActionBar>以及在模态中进一步导航。

将道具传递给模态 ​

$showModal接受第二个参数。您可以使用该参数传入props对象到目标组件。例如：

JavaScript
$showModal(Detail, { props: { id: 14 }});

强制模式全屏显示 ​

此选项仅在Android上有效，因为iOS模式始终是全屏的。

JavaScript
$showModal(Detail, { fullscreen: true, props: { id: 14 }});

从模态返回数据 ​

通话时$showModal，返回一个promise，该promise将解析传递给$modal.close功能。

在以下示例中，关闭控制台中的模态输出'Foo'。

JavaScript
// ... inside Master
$showModal(Detail, { 
 closeCallback(data, ...args) {
    // data type is any
    // args type is any[]
  }
});
HTML
<!-- inside Detail -->
<Button @tap="$modal.close('Foo')" text="Close" />