NativeScript for Storybook v7 Beta 版发布

NativeScript for Storybook（*使用最新的 v7 版本！*）将允许您独立构建 UI。它可以帮助您开发难以触及的状态和边缘情况，而无需运行整个应用程序。

去年（*2022年7月*）首次分享了预览：https://twitter.com/NativeScript/status/1544528977896755200

创建您的 Storybook
从 2022 年 7 月到 2023 年 6 月？
💚 分享你的故事 📚

创建您的 Storybook

安装插件使使用 Storybook 与 NativeScript 变得像 1、2、3 一样简单。

npm install @nativescript/storybook@beta @valor/nativescript-websockets

注意：您可以使用任何 WebSocket polyfill，但是我们预先配置了使用@valor/nativescript-websockets以方便使用，并应确保将其添加到您的 package.json 依赖项中。

1. 初始化配置

npx @nativescript/storybook init

2. 创建故事

您可以在任何组件旁边创建一个{component}.stories.ts|js文件。请参阅 storybook 文档以了解如何编写故事。

Angular
Vue

注意：NativeScript for Storybook 的所有其他版本，包括 React、Solid 和 Svelte，计划在第四季度最终发布。在 Discord 上联系我们了解更多信息。

3. 运行 Storybook

启动 Storybook

npm run storybook

# or
npm run storybook android
npm run storybook ios

应用程序启动后，您可以在 Storybook Web 管理器中选择一个故事。

注意：Android 网络配置

确保 Android 配置为使用cleartextTrafficPermitted选项。以下将说明如何在设置调试/发布配置以确保此设置在任何 Android 版本中都保持安全。

将以下内容添加到您的App_Resources/Android/app.gradle中

android {
  // ...

  defaultConfig {
    // ...
  }

  buildTypes {
    debug {
      resValue "string", "clear_text_config", "true"
    }
    release {
      resValue "string", "clear_text_config", "false"
    }
  }
}

使用以下内容创建App_Resources/Android/src/main/res/xml/network_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="@string/clear_text_config">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

更新App_Resources/Android/src/main/AndroidManifest.xml以使用它

<application
    android:networkSecurityConfig="@xml/network_config"
    ...
    >

</application>

从 2022 年 7 月到 2023 年 6 月？

我们为什么花了这么长时间？

我们去年夏天就知道 v6 到 v7 之间发生了很多变化。我们不想发布 Storybook 6.5 的初步支持，而是希望从一开始就发布官方的 Storybook v7，我们非常喜欢这些变化！
移动应用程序与 Storybook 的集成传统上使用深度链接（*例如 React Native 集成*），但我们希望重新构思一种完全由套接字驱动的工具链方法，这为更出色的体验提供了机会。

我们很高兴看到各种各样形状和颜色的 Storybook，所以请随时在分享您的故事时提及 @NativeScript！