React Native のストーリーブック

専門家の皆様、私たちは皆、アプリケーションで再利用可能なコンポーネントを使用しているか、複数の場所で頻繁に使用されるカスタム コンポーネントを開発してそのロジックを分離しているので、ビジネス ロジックを変更するたびに、使用されているあらゆる場所に反映されます。あなたが開発したコンポーネントを見せてください、と言ったらどうなるでしょうか。それを 1 つのコンポーネントにインポート/実装して、アプリケーションを実行する必要がありますよね?すべての再利用可能なコンポーネントを 1 か所で確認し、遊んだり、さまざまなプロパティを変更したり、検証したりできる方法はありますか?はい、あります。

ストーリーブックとは何ですか?

Storybook を使用すると、開発者は、実際のアプリケーションを実行したり、コンポーネントにインポートしたりせずに、ストーリー (カスタム コンポーネント) を作成し、ストーリーを実行し、さまざまなプロパティで再生し、検証することができます。 Storybook を使用すると、開発者の作業がよりシンプルになり、開発者はすべての Story (カスタム コンポーネント) を 1 か所 (Storybook と呼ばれます) から操作できます。 Storybook は、React、React Native、Angular、Vue などの最も一般的な JavaScript UI フレームワークと統合し、Ruby on Rails などのサーバーでレンダリングされるコンポーネント フレームワークをサポートします。

ストーリーとは何ですか?

ストーリーは、UI コンポーネントのレンダリングされた状態をキャプチャします。開発者はコンポーネントごとに複数のストーリーを作成できます。ストーリーは、コンポーネントを記述するための ES6 モジュールベースの標準であるコンポーネント ストーリー フォーマット (CSF) で記述されます。

ストーリーブックの機能 —

• 分離コンポーネント開発

• 堅牢な UI を提供

• ワークフローを強化するアドオン

• 一貫したユーザー エクスペリエンス

• 単体テストのコンポーネント

• コンポーネントの共有と再利用

インスタレーション —

反応ネイティブ アプリのルート内から次のコマンドを実行します:

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
を保存します 開発者がコンポーネントのプロパティをリアルタイムで調整できるようにします。

アクション —
npm i — @storybook/addon-ondevice-actions
を保存します 開発者は、アクション タブに情報を記録するアクションを使用して onPress 呼び出しを検証できます。

メモ —
npm i — @storybook/addon-ondevice-notes
を保存します 開発者がストーリーにマークダウンを追加して、使用方法を文書化できるようにします。

背景 —
npm i — @storybook/addon-ondevice-backgrounds
を保存します 開発者がストーリーブックの背景を変更して、コンポーネントの外観をさまざまな背景と比較できるようにします。

記事をお読みいただきありがとうございます!

以上がReact Native のストーリーブックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。