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} />
    </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 => <View style={styles.TaskBox}>{story()}</View>)
  .add('default', () => <Task task={task} {...actions} />)
  .add('pinned', () => <Task task={{ ...task, state: 'TASK_PINNED' }} {...actions} />)
  .add('archived', () => <Task task={{ ...task, state: 'TASK_ARCHIVED' }}

配置

// storybook/index.js
import { getStorybookUI, configure } from '@storybook/react-native';

import './rn-addons';

// import stories
configure(() => {
  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(() => {
  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, () => 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 的故事书的详细内容。更多信息请关注PHP中文网其他相关文章！