返回博客首页
← 所有文章

NativeScript 6.5 新特性

2020年3月18日 — 作者 Nick Iliev

欢迎来到您最喜欢的跨平台应用开发框架的另一个版本！NativeScript 6.5 版本为您带来

一如既往，使用以下命令更新到 6.5 版本...

npm install -g nativescript

...然后 升级您的应用。

选项卡和底部导航的动态创建

Tabs 和 BottomNavigation 组件在 NativeScript 6.1 中作为 Beta 组件引入。在此版本中，这两个组件通过提供以编程方式创建它们的方法进一步扩展了其功能。

为了支持组件的动态创建，作为 TabStrip 子组件的一部分，引入了两个新属性。第一个是 iconSource，用于以编程方式创建 TabStrip 图标（通过 res:// 支持资源文件，通过 ~/ 支持本地文件，以及通过 font:// 支持字体图标）。第二个属性称为 iconClass，其目的是设置将应用于图标的 CSS 类（如果您想使用 font:// 的字体图标，则必须使用此属性）。

动态创建 Tabs 的示例

let tabs = new Tabs();
let myTabStrip = new TabStrip();

let tabStripItem1 = new TabStripItem();
tabStripItem1.title = "Tab 1";
tabStripItem1.iconSource = `font://${String.fromCharCode(0xf053)}`;
tabStripItem1.iconClass = "fas"; // e.g., Font Awesome
let tabStripItem2 = new TabStripItem();
tabStripItem2.title = "Tab 2";
tabStripItem2.iconSource = `font://${String.fromCharCode(0xf070)}`;
tabStripItem2.iconClass = "fas"; // e.g., Font Awesome

myTabStrip.items = [tabStripItem1, tabStripItem2];

let tabContentItem1 = new TabContentItem();
tabContentItem1.content = createContent("Content 1");
let tabContentItem2 = new TabContentItem();
tabContentItem2.content = createContent("Content 2");

let contentItems = [tabContentItem1, tabContentItem2];   

tabs.tabStrip = myTabStrip;

// Note: The number of content items must be equal to the number of strip items
tabs.items = contentItems;

TabStrip 中的新样式属性

我们为 TabStrip 组件引入了两个新属性：selectedItemColor 和 unSelectedItemColor。引入这些属性的原因是为了能够轻松修改 TabStrip 项目图标和文本的颜色。这样做也遵循了Material Design 指南，即图标和文本颜色相同。

使用这些新属性非常简单。假设我们有一个简单的 Tabs 组件，我们想将 selectedItemColor 设置为红色，unSelectedItemColor 设置为绿色

<Tabs selectedIndex="1">
    <TabStrip selectedItemColor="red" unSelectedItemColor="green">
            ...
    </TabStrip>
</Tabs>

当我们构建应用程序时，我们会观察到图标和文本现在具有我们在标记中设置的指定颜色

Image of the new behaviour

选项卡中高级 iOS 样式选项

在 6.5 版本之前，Tabs 组件对 iOS 的样式选项有限。现在，通过提供选项卡栏对齐属性以及提供应用扩展 CSS 样式的选项，iOS 样式选项得到了极大扩展。

要更改 TabStrip 的对齐方式，请设置 Tabs 组件的 iOSTabBarItemsAlignment 属性。

<!-- justify is now the defealt value for iOSTabBarItemsAlignment property -->
<Tabs iOSTabBarItemsAlignment="justify">

此新属性支持以下值

leading：选项卡项目左对齐

example for using leading value


justified：选项卡栏平均分配到所有选项卡项目

example for using justified value


center：选项卡项目居中对齐

example for using center value


centerSelected：选项卡项目移动以使选定的选项卡位于中心

example for using centerSelected value

上述属性现在提供了更改font、background-color、color 和 TextTransform 的方法。请注意，存在一些限制

  • iOS MDCTabBar 只支持两种选项卡栏项目样式 - normal 和 selected，这意味着您不能对两个具有相同正常状态的项目使用不同的样式。
  • TabStrip 支持的 TextTransform 值为 none、initial 和 uppercase。
  • 如果 iOSTabBarItemsAlignment 设置为除 justify 之外的其他值，并且您想设置选中项目的背景，则可以通过将 :active 样式设置为 TabStrip 项目来实现，但在这种情况下，不会显示选中突出显示指示器。

DoubleTapGestureEventData

一个社区驱动的 PR（感谢 MCurran16！）扩展了双击事件数据，该数据到目前为止是通用类型（GestureEventData）。新引入的 DoubleTapGestureEventData 通过提供两种访问触发双击事件坐标的方法来扩展通用数据。这些方法是 getX() 和 getY()，并且正如预期的那样，它们将返回当前交互的 X 和 Y 坐标。值以基于特定平台坐标系的设备像素为单位。

实验性的 KotlinJS 支持

在此版本中，我们继续支持 Kotlin，但这次是在应用开发的前端。我们引入了对使用 KotlinJS 编写 NativeScript 应用程序的实验性支持。

我们必须说，这是高度实验性的，并且可能会发生变化，但尽管如此，我们仍然希望社区查看 使用 KotlinJS 的 HelloWorld 示例。请按照 README.md 文件中的说明使用它。其他文档将在不久的将来发布！

using kotlinjs with nativescript