React Native 的故事書-js教程-PHP中文網

React Native 的故事書

Mary-Kate Olsen

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

原創

611 人瀏覽過

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

登入後複製