NativeScript-UI入门篇

最新推荐文章于 2025-05-29 14:23:23 发布

翻译最新推荐文章于 2025-05-29 14:23:23 发布 · 4.5k 阅读

文章标签：

#android #nativescri #ui

Android 同时被 2 个专栏收录

48 篇文章

订阅专栏

NativeScript

4 篇文章

订阅专栏

本文介绍NativeScript的应用开发流程，包括项目目录结构解析、界面构建方法及布局技巧，并演示了如何使用XML定义UI元素和利用不同布局方式组织界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下内容来自官方文档的精简版，详细请看
http://docs.nativescript.org/tutorial/chapter-2

实时查看效果

tns livesync android --watch

目录结构

└── sample-Groceries
    ├── app
    │   └── ...
    ├── node_modules
    │   └── tns-core-modules
    ├── package.json
    └── platforms
        ├── android
        └── ios

说明下这些目录结构：

app：此文件夹包含构建应用程序所需的所有开发资源。你将花费大部分时间在此处编辑文件。
node_modules：此文件夹包含应用程序的npm模块依赖项。所有新的NativeScript项目都以对 tns-core-modules 的单个依赖项开始。
node_modules /tns-core-modules：此文件夹包含您的应用程序的NativeScript模块，这是一个由NativeScript提供的JavaScript模块，您将用它来构建您的应用程序。每个模块包含实现通过平台无关API（例如camera.takePicture（））实现某些功能（摄像机，http调用，文件系统等）所需的平台特定代码。我们后面会看一些例子。
package.json：此文件包含应用程序的配置详细信息，例如您的应用程序ID，您使用的NativeScript版本，以及您的应用程序使用的npm模块。当我们使用npm模块时，我们将进一步看看如何使用这个文件。
platforms：此文件夹包含NativeScript需要构建原生iOS和Android应用程序的平台特定代码。例如在Android文件夹中，你会发现像你的项目的AndroidManifest.xml和.apk可执行文件。同样，ios文件夹包含Groceries的Xcode项目和.ipa可执行文件。注意，Windows和 linux 机器上的用户不会有ios文件夹。

再看看app目录：

└── sample-Groceries
    ├── app
    │   ├── App_Resources
    │   │   ├── Android
    │   │   └── iOS
    │   ├── shared
    │   │   └── ...
    │   ├── views
    │   │   └── login
    │   │       ├── login.js
    │   │       └── login.xml
    │   ├── app.css
    │   ├── app.js
    │   └── ...
    └── ...

App_Resources：此文件夹包含平台特定的资源，如图标，启动屏幕和配置文件。在执行tns run时，NativeScript CLI会将这些资源注入到平台文件夹中的适当位置。
shared：此文件夹特定于Groceries应用程序，包含您需要在您的应用程序中的视图共享的任何文件。在Groceries应用程序中，您会发现一些视图模型对象和一个config.js文件，用于共享配置变量（如API密钥）。
views：此文件夹包含构建应用程序视图的代码，每个视图中都有一个子文件夹。每个视图由一个XML文件，一个JavaScript文件和一个可选的CSS文件组成。杂货应用程序包含三个文件夹用于其三个视图。
app.css：此文件包含应用程序的全局样式。我们将在后面探讨应用程序的样式。
app.js：此文件设置应用程序的启动模块并初始化应用程序。

我们从app.js入手：

var applicationModule = require("application");
applicationModule.start({ moduleName: "views/login/login" });

这两行代码就是整个程序的入口，使用require引用application模块（相当于import），然后启动login这个界面这个login是xml文件，后面会说。

构建界面

在login.xml里加入元素：

<Page>
    <Label text="hello jimo" />
    <TextField hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none" />
    <TextField hint="Password" secure="true" />

    <Button text="Sign in" />
    <Button text="Sign up for Groceries" />
</Page>

不过现在只能看到button占了整个页面，下面看布局。

布局

Absolute Layout：绝对布局允许使用显式x和y坐标定位元素。当您需要将元素放置在准确的位置时（例如，在应用程序的左上角显示活动指示器小部件），此功能非常有用。

Dock Layout ： Dock布局用于将UI元素放置在应用程序的外边缘。例如，停靠在屏幕底部的容器是广告的好位置。

Grid Layout ：网格布局允许您将接口划分为一系列行和列，非常类似于HTML标记中的<table>。

Stack Layout ：堆栈布局允许您垂直或水平地堆叠子UI组件。

Wrap Layout ：Wrap布局允许子UI组件在填充空间时从一行或一列流向下一行。

在登录页面我们采用简单的statcklayout：

<Page>
    <StackLayout orientation="vertical">
        <Label text="hello jimo" />
        <TextField hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none" />
        <TextField hint="Password" secure="true" />

        <Button text="Sign in" />
        <Button text="Sign up for Groceries" />
    </StackLayout>
</Page>

CSS样式

我们可创建全局样式核特殊页面的样式，这个和网页是一样的。

全局样式在app.css中，我们写一个：

Page {
    background-color: white;
    font-size: 17;
}
TextField {
    margin: 10;
    padding: 10;
}
Image {
    margin-top: 20;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 80;
}
Button {
    margin: 10;
    padding: 10;
}

在app.css头部加入可以引用其他css文件

@import url('~/platform.css');

在platform.android.css里：

.link {
    background-color: transparent;
}

我们给button加个class属性：

<Button text="Sign up for Groceries" class="link" />

以上效果：

图片

在线图片

<Image src="https://www.nativescript.org/images/default-source/landingpages/logo.png" />

本地图片，app/images下

<Image src="~/images/logo.png" />

还有平台下的图片，在app/App_Resources下：

<Image src="res://logo" stretch="none" horizontalAlignment="center" />