发布时间:2021年2月26日 - 3分钟阅读
我很高兴地宣布Storybook Native的正式发布,这是一个展示移动应用和组件的新工具。 几个月前,Raj Vasikarla撰写了一篇博客文章,介绍了appetize.io上的移动应用如何与Storybook集成。现在,Storybook Native作为普通网络Storybook的扩展正式推出。
Storybook Native旨在为不熟悉Storybook和React编程的人提供简化的体验。主要是作为一个构建工具使用。
作为用户,你写了少量的基本JavaScript代码,在这里你描述了你的移动应用或你想要显示的组件的状态。这些代码作为Node.js脚本运行,让Storybook Native自动生成故事文件。
故事文件生成后,你运行一个终端命令在浏览器中打开Storybook。不需要编写React代码,也不需要安装任何其他的依赖关系,就可以开始使用Storybook。
与Raj博文中的原始例子相比,Storybook Native的一个重大改进是可以在故事之间切换,而无需重新启动appetize.io会话。如果你的移动应用支持深度链接,你就可以像在网页Storybook中一样,在故事之间即时切换。在文档中找到更多关于如何使用深度链接更新现有移动应用程序的信息。
没有深度链接的例子。
例子与深度链接。
通过深度链接,我们可以创建一个整体的用户体验,这与web Storybook的功能非常相似。如果您在故事中使用的是没有深度链接的旋钮,那么每次旋钮值改变时,您的appetize.io会话都必须重新启动。有了深度链接,您的应用程序将立即刷新以反映新的旋钮值。
此外,Storybook Native还内置了对appetize.io允许你与设备模拟器进行的许多互动的支持。这包括旋转模拟器使其处于横向模式,捕捉屏幕截图并将其保存到硬盘上,以及切换被模拟的设备。
对于已经熟悉JavaScript并希望更灵活地渲染故事的用户来说,你还可以选择将Storybook Native作为一个轻量级的React组件而不是构建工具。通过这种方法,你可以很灵活地决定向你的移动应用发送什么参数。这意味着你可以充分利用诸如控件/旋钮、附加组件等功能,以及几乎所有其他与web storybook相关的功能。
开始使用
要开始使用Native Storybook,请查看这里的设置说明。
实例
到目前为止,我们只是对Storybook Native可能实现的功能进行了简单的介绍。目前还没有正式的计划功能路线图,但我们很乐意听到你对使用情况或任何你想看到的功能的意见。欢迎在版本库中留下评论或做出贡献。
Storybook Native是由Adil Malik和Raj Vasikarla在Intuit开发的。非常感谢每一位已经为它做出贡献的人,也感谢Michael Shilman的帮助。感谢Adam Dierkens使用Storybook和appetize.io创建了概念验证。
通过www.DeepL.com/Translator(免费版)翻译