学习 NativeScript 布局的新方法

当你向一个刚接触移动应用开发的人谈论 NativeScript 时，通常会涉及到这样一句话：

"你甚至可以使用你的 Web 技能，比如 JavaScript、CSS 和 XML。"

然后那个人会看着你，像是在说，“所以...XML 也是 Web 技能吗？” 😕.

当然，就像 HTML 定义了 UI 元素的呈现方式一样，XML（在 NativeScript 环境中）也为真正原生的 UI 元素的呈现方式做着同样的事情，比如：

<Page>
  <StackLayout>
    <Label text="This is a Label!" />
    <Button text="Tap Me" />
  </StackLayout>
</Page>

在大多数情况下，人们都能理解 <TextField> == <input type="text">、<Button> == <input type="button"> 等等。当涉及到 NativeScript 布局容器的概念时，有时就会出现困惑。

要深入了解 NativeScript 布局，请查看 Jen Looper 关于 NativeScript 布局揭秘的文章。

布局容器？

NativeScript 布局容器实际上类似于 HTML 的 <div>，但不仅仅是 <div>，它们描述了原生 UI 元素在屏幕上的呈现方式。例如，<StackLayout orientation="vertical"> 会垂直地将元素堆叠在一起。足够简单吗？

stack layout example

但是布局可能会很快变得复杂。这就是为什么学习如何构建适当且有效的布局是学习使用 NativeScript 进行编码的关键部分。

我亲切地称之为“学习 NativeScript 布局”的新工具诞生了。我知道，我想这个名字想了很久。😜

在 nslayouts.com 上提供，无论是新手还是经验丰富的 NativeScript 开发人员，都可以浏览各种练习，学习如何使用几乎所有类型的 NativeScript 布局容器。

advanced stack layout

基于为 Flexbox Froggy 提供动力的同一代码库，“学习 NativeScript 布局”会让你循序渐进地学习布局容器，从基本的 <StackLayout> 开始，到更复杂（更强大）的 <GridLayout> 结束。

grid layout example

还在等什么？现在就尝试 nslayouts.com，并告诉我你的想法（并且一定要把它分享给那些刚接触 NativeScript 的人！）。所有内容都是开源的，所以你可以在 Github 仓库中尽情吐槽。