NativeScript官方版

NativeScript简介

NativeScpt提供应用程序设计功能，可用于设计手机应用程序，支持iOS设备的Andid和应用程序生产，并通过JavaScpt代码库为iOS、Andid和Web构建真正的原生应用程序。在TypeScpt、CSS和流行框架(如Angular和Vue.js)的支持下，可以用已知的技术构建优秀的移动应用。提供了基本的用户界面基础，NativeScpt移动应用的用户界面由页面组成。一般来说，用户界面的设计是开发并存储在XML文件中，样式是通过CSS完成的，业务逻辑是开发并存储在JavaScpt或TypeScpt文件中。开发应用程序的用户界面时，您可以在单独的页面上实现每个应用程序屏幕，也可以使用选项卡视图在单个页面上实现应用程序屏幕。对于每个页面，您需要一个单独的XML文件来保存页面的布局。对于每一个由XMLNativeScpt解析的文件，框架还会找到同名的JavaScpt或TypeScpt文件，并在其中执行业务逻辑。

NativeScpt软件功能

有角的

NativeScpt与现代Angular有深度的集成功能，拥有与Angular CLI集成、路由器支持、代码生成、webpack等更多功能。

Vue.js

现在可以使用Vue.js构建原生移动应用，使用Vue CLI、Vuex等你熟悉和喜欢的Vue框架功能。

JavaScpt，TypeScpt，CSS

想用自己的方式编码吗？NativeScpt提供了丰富的支持，现代的JavaScpt、TypeScpt、CSS、Flexbox等Web技能。构建您的移动应用程序，而不受基于WebView的混合应用程序的功能和用户体验的限制。

可伸长的

有了NativeScpt，你可以100%直接访问所有的iOS和Andid API。您可以轻松地重用CocoaPods和Andid SDK，并在市场上找到免费的插件、模板和应用程序示例。

NativeScpt软件特色

原函数

美观，可访问，平台原生用户界面-不需要网络视图。定义一次，让NativeScpt适应在任何地方运行，或者为特定的设备和屏幕定制UI。

易于学习

使用你已经拥有的网络技能，用JavaScpt、CSS和本地用户界面标签开发真正的本地应用程序。

跨平台

从代码库中为iOS和Andid编写和部署本机移动应用程序。使用Angular或Vue共享现有的基于网络的代码。

社区驱动

NativeScpt周围是热情的社区。框架的决策和方向直接来自现实世界中的当前项目。

和免费开源。

NativeScpt是100%免费的开源软件，由Apache 2授权。

NativeScpt教程

命令行界面设置

通过您选择的开源NativeScpt命令行界面和IDE或文本编辑器，您可以在本地免费匿名地创建、开发、存储和构建应用程序。

NativeScpt CLI允许您以两种不同的方式构建应用程序。

快速安装允许您在本地计算机上构建和开发NativeScpt应用程序，而无需安装任何iOS或Andid依赖项，非常适合入门。

所有安装都将引导您完成安装。您需要编译iOS和Andid应用程序的本地依赖项。最终，您需要完成设置，然后才能使用一些NativeScpt插件并为App Store和Google Play构建应用程序。

快速设置

步骤1:安装Node.js

NativeScpt CLI是在Node.js上构建的，所以需要安装Node.js才能使用nativescript。

要安装Node.js，请打开终端或命令提示符，执行node & # 8211版本.如果出现问题，请前往https://nodejs.org/下载并安装最新的LTS(长期支持)发行版，并重启终端或命令提示符。

提示:

如果你使用的是macOS和Homebrew，可以通过运行brew update(下载最新更新)brew install node@8在终端安装Node.js LTS版本。

NativeScpt CLI支持Node.js的各种版本，所以如果你已经安装了Node.js，应该还不错。如果您碰巧运行的是不支持的版本，tns医生命令将立即运行，并标记问题供您升级。

注意:Mac用户，请记住您可能需要node@8/bin手动添加路径。如果执行节点& # 8211；版本收到“未找到命令”错误，请运行echo & # 8216export PATH = & # 8221/usr/local/opt/node @ 8/bin:$ PATH & # 8221；‘& gt& gt~/.bash_pfile并重新启动终端。

步骤2:安装本机命令行界面

打开终端或命令提示符，并执行以下命令，从Node.js包管理器npm安装NativeScpt CLI:

npm安装-g nativistpt

注意:

如果您正在使用macOS并收到EACCES错误，则需要使用sudo-即重新运行最后一个命令，sudo npm install-g natives pt，或者花费一些时间来修复npm权限，以便可以在没有管理员权限的情况下全局安装NPM包。

设置后，终端/命令提示符下应该有两个命令可用:tns(简称Elektive小号)和Native CRIPT。这两个命令是一样的，所以你可能要坚持短tns。

并继续在终端或命令提示符下运行tns，验证安装是否成功。您应该会看到从这一部分开始的一长串命令:

第3步:安装NativeScpt Playgund应用程序

本机命令行界面快速设置使您能够在本地开发应用程序，并在物理Andid或iOS设备上测试它们。这可以启用一些非常酷的工作流，例如允许您在Windows或Linux开发计算机上开发iOS应用程序。

NativeScpt用户界面布局过程

NativeScpt提供了一个递归布局系统，可以调整屏幕上视图的大小和位置。是布局测量和定位布局容器及其子视图的过程。布局是一个密集的过程，其速度和精力取决于子级的数量和布局容器的复杂性。例如，简单的布局容器(如AbsoluteLayout)可能比更复杂的布局容器(如GdLayout)更好。

布局分两步完成——测量步骤和布局步骤。为此，每个视图都提供了度量和布局方法。此外，每个布局容器都提供自己的布局onMeasure，onLayout实现其特定的布局。

测量通过

在测量过程中，将测量每个视图，以恢复其所需的大小。通过评价，下属:

宽度

高度

最小宽度

闵八

能见度

上外边距

边缘右侧

底部边距

边距英尺

布局通行证

在布局过程中，每个布局视图都被放置在特定的布局槽中。该槽由所需的视图大小(从测量交付中获得)和下属决定:

上外边距

边缘右侧

底部边距

边距英尺

水平线向

竖向定线

布局属

保证金

由四个边缘属(边缘图、边缘图、边缘图和边缘图)描述的图形与其父图形之间的距离。

通过XML设置边距时，可以选择以下方法。

设置值:提供将应用于视图所有面的值。

设置两个值:提供两个值。第一个值应用于顶部，第二个值应用于右侧。接下来，将第一个值应用于底部，将第二个值应用于左侧(按此顺序)。

设置四个值:为每个边距提供四个值。第一个值应用于顶部，第二个值应用于右侧，第三个值应用于底部，第四个值应用于左侧(按此顺序)。

填入

四种填充能量(paddingTop、paddingRight、paddingBottom和paddingLeft)描述了布局容器与其子容器之间的距离。

通过XML设置填充时，可以选择以下方法。

设置值:提供将应用于视图所有面的值。

设置两个值:提供两个值。第一个值应用于顶部，第二个值应用于右侧。接下来，将第一个值应用于底部，将第二个值应用于左侧(按此顺序)。

设置四个值:为每个填充提供四个值。第一个值应用于顶部，第二个值应用于右侧，第三个值应用于底部，第四个值应用于左侧(按此顺序)。

对齐

只有当分配给元素的大小超过其所需大小时，布局才会应用水平和垂直对齐。

下表显示了水平校准的有效值。

支持百分比

NativeScpt支持宽度、高度和边距的百分比值。在布局遍历的开始，百分比值是根据父级的可用大小计算的。这意味着如果两个按钮在垂直方向上放置在堆栈布局上，高度= & # 8217；50%’他们将获得所有可用的高度(例如，他们将垂直填充堆栈布局)。确保金属也是如此。例如，如果设置marginLeft = & # 82175%’，元素的边距将对应于父元素可用宽度的5%。

IOS安全区域支持

IOSSafe Area是苹果在iOS 11中引入的一个术语。它是屏幕的免费使用区域，不会被系统的硬件和软件部分阻挡。安全区不是常数。它受间隙、屏幕圆角、状态栏和主页指示器的影响，但也受应用程序的某些部分(如操作栏和标签栏)的影响。

从5.0版本开始，NativeScpt为iOS提供了默认的处理机制Safe Area。默认行为是一些容器视图组件(可能有子组件)溢出安全区域并排列在屏幕边缘。这些容器组件是:

整页的空间

有平面的

动态视图

网页浏览

中继器

内部工作流程如下:

1.测量通过-所有组件都在屏幕的安全区域进行测量。

2.布局通过-所有组件以全屏方式布局，但已插入安全区域的边界。

3.布局通过-如果组件与安全区域接壤，调整并将其扩展到屏幕边缘。

注意:上述工作流可能会导致容器的布局大小大于标签中最初声明的大小。您可以通过将iosOverflowSafeArea下的属设置为来防止此行为为假。

IosOverflowSafeArea属

上述默认行为应该会提供良好的用户体验。此外，NativeScpt 5.0公开了iosOverflowSafeArea可以控制组件如何处理iOS的安全区域。如果希望组件在与安全区域接壤时将安全区域扩展到屏幕边缘，请将该属性值设置为。将其设置为false以明确防止此行为。组件的默认值为真。所有其他组件都应被视为应限制在安全区域内的内容，默认值为false。

整页的空间

LayoutBase是提供子元素定位的所有视图的基类。

您可以使用各种布局容器来放置元素。他们评估了视图的基本类别，如宽度、高度、最小宽度和路线，并揭示了定位儿童视图的更具体类别。

预定义布局

下表显示了NativeScpt提供的预定义布局。

[码头布局]

[码头布局]

这种布局将其子级放在外边缘，并允许其最后一个子级占据剩余空间。

[StackLayout] [StackLayout]:此布局水平或垂直排列其子级。按方向设置。

[wrapplayout][wrapplayout]:此布局根据方向将其子级放在行或列中，直到空格被填满，并将它们换行到新的行或列中。

声明主页

每个NativeScpt应用程序都必须有一个在应用程序启动时加载的主页。您需要通过调用模块的运行方法来显式设置应用程序的主页，并且应用程序会传递NavigationEntry所需的moduleName。

NativeScpt导航框架在XML中找到具有指定名称的文件，加载它并导航到相应的页面。如果NativeScpt找到一个同名的JavaScpt或TypeScpt文件，它将执行其中的代码。

注意:在nativescript 4 . 0 . 0之前，启动方会自动创建一个基础根Frame实例并包装您的页面。新的运行方法将把提供的模块的根元素设置为应用程序根元素。这实际上意味着，除了Page之外，您现在还可以拥有应用程序的其他根目录，例如TabView和SideDrawer。Start现在被标记为过时。

导航到该页面

您可以使用类的导航方法在页面之间导航框架。的Frame类表示一个逻辑单元，负责不同页面之间的导航。使用NativeScpt 4和更高版本，每个应用程序可以有一个或多个框架。为了获得对框架的引用，我们可以使用getFrameById方法。

当导航被触发时，NativeScpt将找到指定名称的XML文件，加载该文件并导航到相应的页面。如果NativeScpt找到一个同名的JavaScpt或TypeScpt文件，它将执行其中的代码。

该路径是相对于应用程序根目录的。在上面的例子中，nativistptmy-page . XML在项目的app目录中查找文件(例如，app/my-page.xml)。

导航时传递绑定上下文

当您导航到页面时，可以自动提供bindingContext。这将为您提供一种使上下文成为bindingContext导航页面的简单方法。方法是在方法上设置bindingContext，指向自定义视图模型的导航。

传递和接收自定义上下文

如果我们想要传输一个特定的上下文，并且需要比自动传输bindingContext更多的控制，我们可以在navigatedEntry对象中按上下文使用这个属。被导航的页面可以通过navigatedTo事件和navigationContext属来获取传递的上下文。

从主页发送绑定上下文

从中接收上下文的子页面

执行业务逻辑

当TypeScpt文件或文件与XML文件同名时，NativeScpt将加载该文件或带有XML文件的文件。在这个JavaScpt或TypeScpt文件中，您可以管理事件处理程序、组合上下文或执行其他业务逻辑。

在main-page.xml的例子中，您的页面由一个按钮组成。当您单击按钮时，按钮点击功能被触发。

这个例子演示了一个简单的计数器应用程序。计数器的逻辑在main-page.js或main-page.ts文件中实现。

要从用户界面访问变量或函数，您需要导出以在模块的对象中声明它们。NativeScpt将XML声明中每个属的值设置为相应属或组件的事件。如果没有对应的亏格，NativeScpt会将亏格值设置为expando对象。

用户界面模块

NativeScpt提供了广泛的内置用户界面模块布局和小部件。您还可以创建自己的自定义用户界面模块。当NativeScpt解析XML文件时，它将在模块导出中查找与名称匹配的组件。例如，当文件中有一个按钮声明时，在模块导出中查找名称。

默认内容组件

顶层用户界面模块是内容组件，如页面和布局。这些内容组件使您能够以特定的方式安排交互式用户界面模块。

页，面，张，版

您的应用程序页面(或屏幕)是模块页面类的实例页面。通常，一个应用程序将包含多个应用程序屏幕。

通过使用pageLoaded事件，可以在加载页面时执行一些业务逻辑。您需要在中设置加载页面的main-page.xml。

您需要处理加载到main-page.js或main-page.ts文件中的业务逻辑。