React Native 的故事书-js教程-PHP中文网

React Native 的故事书

Mary-Kate Olsen

发布： 2024-09-25 06:24:31

原创

610 人浏览过

Storybook for 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);

登录后复制