React Native 的故事书- 技术经验 -卓越飞翔博客

react native 的故事书

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

什么是故事书？

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

什么是故事？

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

故事书特点——

独立组件开发
提供强大的 ui
增强您工作流程的插件
一致的用户体验
单元测试组件
共享和重用组件

安装 —

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

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

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

运行故事书 —

# starts storybook in development mode
npm run storybook

写故事——

创建任务组件

// components/task.js
import * 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.js
import * 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.js
import { getstorybookui, configure } from '@storybook/react-native';

import './rn-addons';

// import stories
configure(() =&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
允许开发人员更改故事书的背景，以将组件的外观与不同背景进行比较。

感谢您阅读文章！