使用 NativeScript-Vue 入门：第二集

·

在上一篇有关 NativeScript-Vue 路由的文章中，我讨论了如何在 NativeScript-Vue 应用程序中进行基本路由。我描述了可通过手动路由功能获得的简单的内置路由，以及它如何让您在应用程序的不同页面之间来回移动。

在本文中，我将描述另一种技术。而不是更改整个页面（即从“列表”页面更改为“详细信息”页面），我将描述一个类似于标签的界面，其中包含某种形式的导航 UI（请考虑屏幕底部的标签）在其上方加载不同的组件。

和以前一样，我要感谢 Jen Looper 的帮助！

“是组件”方法

Vue 可以做的更有趣的事情之一是使用动态组件。这通过:is声明起作用。因此，例如：

<component :is="someComponent" />

在此示例中，基本component标签将呈现为someComponentis的任何值。您甚至可以动态切换。如果someComponent指向某个Cat组件，但随后指向Dog，则 Vue 会自动处理新组件的显示更新。几个月前，我使用动态表单字段编写了一个示例。

该技术也为我们提供了一种有趣的导航方式。如果我们将<component>标记视为“视图”，则可以通过简单地换出 is 属性的当前值来“导航” 。

让我们看一个实际的例子。

首先，我们的主要“家庭”组成部分：

<template>
    <Page class="page">
        <ActionBar :title="currentComponent" class="action-bar" />
        <GridLayout rows="2*, auto" columns="*, *, *">
            <component v-for="component in viewsArray" v-show="component === currentComponent" :is="component"
            row="0" col="0" colSpan="3"/>
            <Button text='Info' @tap="currentComponent = 'CatInfo'" row="1" col="0" />
            <Button text='Pic' @tap="currentComponent = 'CatPic'" row="1" col="1" />
            <Button text='Log' @tap="currentComponent = 'CatLog'" row="1" col="2" />
        </GridLayout>
    </Page>
</template>
<script>
import CatInfo from './CatInfo';
import CatPic from './CatPic';
import CatLog from './CatLog';
export default {
    data () {
        return {
            viewsArray: [ 'CatInfo', 'CatPic', 'CatLog' ],
            currentComponent: 'CatInfo'
        };
    },
    components: {
        CatInfo, CatPic, CatLog
    }
}
</script>

让我们从标记开始。首先，请注意使用GridLayout。这里的想法是为应用程序的“视图”设置顶部，为导航设置底部。中的第一个元素GridLayout是component标签。从技术上讲，您可以v-for在其中看到多个标签。我们不想一次拥有三个视图，那么这如何工作？首先请注意，a v-show是用来确保我们一次只能看到一个。然后请注意相同的位置信息（row和col），以使组件基本上彼此堆叠。最后，底部的三个按钮负责导航。

现在让我们看一下代码。可能的视图集在称为的数组中定义viewsArray。这就是component上面的标签所绑定的。然后有一个名为的简单字符串值currentComponent。如果返回到按钮，您将看到那里的逻辑只是更改了字符串的值。

最终结果是，您可以点击每个按钮以交换当前可见的视图。虽然视图没什么特别的，但这里是CatInfo：

<template>
    <Label text="cat info!" />
</template>
<script>
export default {
    data() {
        return {
        };
    }
}
</script>

这是另一个示例CatPic：

<template>
    <Image src="https://placekitten.com/400/500" />
</template>
<script>
export default {
    data() {
        return {
        };
    }
}
</script>

最后，是该应用程序的一个屏幕截图：

使用 pic 选项卡的应用程序的屏幕截图

您可以在此 NativeScript Playground 项目中查看整个应用程序，并在设备上进行测试。有关此技术的另一个示例，请在此处查看 Jen Looper 的示例。

使用框架

对于下一个示例，我们将比先前的示例做一些低级的操作。每个 NativeScript 应用程序都使用称为的核心 UI 元素Frame。A Frame是Page渲染组件的位置。您甚至可能没有注意到这一点。在默认的 NativeScript Vue 应用程序中，您的app.js文件将如下所示：

import Vue from 'nativescript-vue';
import HelloWorld from './components/HelloWorld';
// Uncommment the following to see NativeScript-Vue output logs
// Vue.config.silent = false;
new Vue({
  template: `
        <Frame>
            <HelloWorld />
        </Frame>`,
  components: {
    HelloWorld
  }
}).$start();

注意该template属性。它定义了要由Frame标签包裹的核心布局。该HelloWorld组件本身被包裹在一个Page。但是，您可以修改此布局以创建更高级的布局和导航方案。因此，例如，您可能有多个框架，每个框架都有自己的页面，并对其中任何一个使用导航。每个框架都有其自己的导航历史记录，您可以在每个框架中来回移动。

对于选项卡式应用程序的下一个版本，我们仍将使用一个框架，但我们将修改核心布局，以便在应用程序的第一个组件中设置框架。

首先，这是app.js文件：

import Vue from 'nativescript-vue';
import Home from './components/Home';
// Uncommment the following to see NativeScript-Vue output logs
//Vue.config.silent = false;
new Vue({
  render: h => h(Home)
}).$start();

请注意，这里没有模板，但只渲染主要组件Home。现在让我们来看一下。

<template>
    <GridLayout rows="*, auto">
        <ContentView row="0">
            <Frame>
                <CatInfo />
            </Frame>
        </ContentView>
        <Nav row="1" />
    </GridLayout>
</template>
<script>
import CatInfo from './CatInfo';
import Nav from './Nav';
export default {
    data() {
        return {};
    },
    components: {
        CatInfo, Nav
    }
};
</script>

像以前一样，我们希望最终在顶部有一个“视图”，在底部有一个导航栏。（并且要清楚，这是任意的。您的选项卡可以在顶部，右侧，任何您想要的位置。）请注意，在网格的顶部使用ContentView和Frame。这将是呈现我们的内容的地方。由于我们应用程序的第一个“页面”是硬编码的，因此只需在其中直接键入即可。现在，我们的导航分为自己的组件Nav：

<template>
    <GridLayout rows="auto" columns="*, *, *">
        <Button text='Information' @tap="goTo('info')" row="1" col="0" />
        <Button text='Picture' @tap="goTo('pic')" row="1" col="1" />
        <Button text='Log' @tap="goTo('log')" row="1" col="2" />
    </GridLayout>
</template>
<script>
import CatInfo from "./CatInfo";
import CatPic from "./CatPic";
import CatLog from "./CatLog";
export default {
    data() {
        return {
            routes: {
                info: CatInfo,
                pic: CatPic,
                log: CatLog
            }
        };
    },
    methods: {
        goTo(s) {
            this.$navigateTo(this.routes[s]);
        }
    }
};
</script>

与前面的示例一样，选项卡栏定义为一组按钮。这次我们使用的方法，goTo并且传递了要导航到的路线的名称。该$navigateTo方法用于处理加载我们的视图，并且由于我们的应用程序只有一个Frame标签，因此它将自动加载其中的组件。$navigateTo如果有多个参数，可以使用其中一个参数来指定框架。

和以前一样，每个页面几乎相同，但是请注意，我们现在需要使用Page组件。这是CatInfo组件：

<template>
    <Page class="page">
        <ActionBar title="Cat Information" />
        <Label text="Information about the cat. Lorem ipsum meow." />
    </Page>
</template>
<script>
export default {
    data() {
        return {
        };
    }
}
</script>

这是CatPic一个：

<template>
    <Page class="page">
        <ActionBar title="Cat Picture" />
        <Image src="https://placekitten.com/400/500" />
    </Page>
</template>
<script>
    export default {
        data() {
            return {};
        }
    };
</script>

和以前一样，您可以在此 NativeScript Playground 项目中看到整个应用程序。此外，您还可以在此处看到 Jen Looper 的炫酷示例。我特别喜欢她的示例的一件事是，进一步细分了“路线”，使导航组件更加灵活。

更进一步

我希望这些示例（以及上一篇文章中的示例）可以帮助您构建更强大的 NativeScript-Vue 应用程序。

如果您想要一个更高级的示例，则应查看 nativescript-vue-navigator 插件。它提供了一种与“传统” Vue 路由更接近的体验，并且可能更容易掌握。（和以前一样，Jen 在行动中有很好的例子！）