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中文網其他相關文章！