React Native 的故事书

百变鹏仔 3天前 #JavaScript

文章标签故事书

专家您好，我们都在应用程序中使用可重用组件，或者我们开发了在多个地方经常使用的自定义组件，并将逻辑分开，因此每当我们更改业务逻辑时，它都会在使用它的任何地方反映出来。如果我说向我展示您开发的组件，您需要在一个组件中导入/实现它并运行应用程序，会发生什么，对吗？有什么方法可以让我在一个地方看到所有可重用组件，我可以使用它，更改各种道具并验证它？是的，它就在那里。

什么是故事书？

storybook 允许开发人员编写故事（自定义组件）、运行故事、使用各种属性、验证它，而无需运行实际应用程序，也无需导入任何组件。 storybook 让开发人员的生活变得更加简单，开发人员可以从一个地方使用所有 story（自定义组件）——这就是 storybook。 storybook 与最流行的 javascript ui 框架（如 react、react native、angular、vue）集成，并支持服务器渲染组件框架（如 ruby on rails）。

什么是故事？

story 捕获 ui 组件的渲染状态。开发人员可以为每个组件编写多个故事。故事以组件故事格式 (csf) 编写，这是一种基于 es6 模块的标准，用于编写组件。

故事书特点——

安装 —

从 react native 应用程序的根目录中执行此命令：

npx -p @storybook/cli sb init — 输入react_native

系统会提示您询问是否要安装@storybook/react-native-server，您现在可以安全地选择不安装它，因为您可以稍后添加它，而且这不是必需的。

运行故事书 —

# starts storybook in development modenpm run storybook

写故事——

创建任务组件

// components/task.jsimport * as react from 'react';import { textinput, safeareaview } from 'react-native';import { styles } from '../constants/globalstyles';export default function task({ task: { id, title, state }, onarchivetask, onpintask }) {  return (    <safeareaview style="{styles.listitem}"><textinput value="{title}" editable="{false}"></textinput></safeareaview>  );}

创建任务故事

// components/task.stories.jsimport * as react from 'react';import { view } from 'react-native';import { styles } from '../constants/globalstyles';import { storiesof } from '@storybook/react-native';import { action } from '@storybook/addon-actions';import task from './task';export const task = {  id: '1',  title: 'test task',  state: 'task_inbox',  updatedat: new date(2018, 0, 1, 9, 0),};export const actions = {  onpintask: action('onpintask'),  onarchivetask: action('onarchivetask'),};storiesof('task', module)  .adddecorator(story =&gt; <view style="{styles.taskbox}">{story()}</view>)  .add('default', () =&gt; <task task="{task}"></task>)  .add('pinned', () =&gt; <task task="{{" ...task state:></task>)  .add('archived', () =&gt; <task task="{{" ...task state:><p>配置<br></p><pre class="brush:php;toolbar:false">// storybook/index.jsimport { getstorybookui, configure } from '@storybook/react-native';import './rn-addons';// import storiesconfigure(() =&gt; {  require('../components/task.stories.js');}, module);const storybookuiroot = getstorybookui({  asyncstorage: null,});export default storybookuiroot;

渲染全部 |具体故事

import { getStorybookUI, configure } from '@storybook/react-native';import { name as appName } from './app.json';import { AppRegistry } from 'react-native';configure(() =&gt; {  require('./storybook/stories/Button/Button.stories.js'); // render all stories require(‘./storybook/stories’) - which contain all your stories}, module);const StorybookUIRoot = getStorybookUI({});AppRegistry.registerComponent(appName, () =&gt; StorybookUIRoot);

附加组件 —

旋钮 —
npm i — 保存@storybook/addon-ondevice-knobs
允许开发者实时调整组件 props。

行动 —
npm i — 保存@storybook/addon-ondevice-actions
开发人员可以使用将在操作选项卡中记录信息的操作来验证 onpress 调用。

笔记 —
npm i — 保存@storybook/addon-ondevice-notes
允许开发者在您的故事中添加一些 markdown 以帮助记录其使用情况。

背景 —
npm i — 保存@storybook/addon-ondevice-backgrounds
允许开发人员更改故事书的背景，以将组件的外观与不同背景进行比较。

感谢您阅读文章！

文章推荐

React Native 的故事书

什么是故事书？

什么是故事？

故事书特点——

安装 —

运行故事书 —

写故事——

附加组件 —

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？